Question

目前我们正在使用以下脚本为wordpress网站创建一个轻量级灯箱，它可以在桌面上完美运行，但是如果你用手指在其中一个上滚动，只需在触摸设备上滚动就会触发覆盖图像，无论如何都要阻止这种情况发生？

<script>
  var WHLightbox = {

    settings: {
      overlay: $('.portfolio-tile--overlay'),
      imageCell: $('.cell-image, .portfolio-tile--image')
    },

    data: {
      images: []
    },

    init: function() {
      this.events();
      this.buildImageData();
    },

    events: function() {
      var self = this;
      this.settings.imageCell.on('click touchend', function(e) {
        e.preventDefault();
        e.stopPropagation();

        // set up the overlay
        self._positionOverlay();
        self._openOverlay();
        self._preventScrolling();

        // create the image slide
        self._createImageSlide($(this));


      });
      this.settings.overlay.on('click touchend', function(e) {
        e.preventDefault();
        e.stopPropagation();
        self._closeOverlay();
      });
      $('.portfolio-tile--overlay--controls--prev, .portfolio-tile--overlay--controls--next').on('click touchend', function(e) {
        e.preventDefault();
        e.stopPropagation();
      });

      $('.portfolio-tile--overlay--controls--prev').on('click touchend', function(e) {
        e.preventDefault();
        e.stopPropagation();
        self.showPrev();
      });

      $('.portfolio-tile--overlay--controls--next').on('click touchend', function(e) {
        e.preventDefault();
        e.stopPropagation();
        self.showNext();
      });
    },


    // public functions
    showPrev: function() {
      var index = this.currentImageIndex();
      if(index === 0) {
        index = this.data.images.length;
      }
      this._createImageSlide(false, index-1);
    },
    showNext: function() {
      var index = this.currentImageIndex();
      if(index === this.data.images.length-1) {
        // set to -1 because it adds 1 in the _createImageSlide call
        index = -1;
      }
      this._createImageSlide(false, index+1);
    },

    currentImageIndex: function() {
      if(this.settings.overlay.hasClass('open')) {
        var imageUrl = $('.portfolio-tile--main-image').attr('src');

        for(var i=0; i<this.data.images.length; i++) {
          if(this.data.images[i].imageUrl === imageUrl) {
            return i;
          }
        }

      } else {
        return false;
      }
    },


    // image data
    buildImageData: function() {
      var self = this,
          i = 0;
      this.settings.imageCell.each(function() {
        self.data.images[i] = {
          imageUrl: self._getImagePath($(this))
        }
        i++;
      });
    },


    // slide
    _createImageSlide: function($el, index) {
      var imagePath;
      if(!$el) {
        imagePath = this.data.images[index].imageUrl;
      } else {
        imagePath = this._getImagePath($el);
      }
      this.settings.overlay.find('.portfolio-tile--main-image').attr('src', imagePath);
    },

    _getImagePath: function($el) {
      var imagePath,
          spanEl = $el.find('span.js-cell-image-background'),
          imgEl = $el.find('img.cell-image__image');
      if(spanEl.length) {
        imagePath = spanEl.css('backgroundImage');
        imagePath = imagePath.replace('url(', '').replace(')', '');
      } else if(imgEl.length) {
        imagePath = imgEl.attr('src');
      }

      return imagePath;

    },

    // overlay
    _positionOverlay: function() {
      this.settings.overlay.css({
        // position the overlay to current scroll position
        top: $(window).scrollTop()
      });
    },
    _openOverlay: function() {
      this.settings.overlay.addClass('open');
    },
    _preventScrolling: function() {
      $('html, body').addClass('no-scroll');
    },
    _reInitScrolling: function() {
      $('html, body').removeClass('no-scroll');
    },
    _closeOverlay: function() {
      this.settings.overlay.removeClass('open');
      this._reInitScrolling();
    }
  };

  WHLightbox.init();


</script>

Answer 1

您可以使用Modernizr这样的库来检测触摸，看看有关检测触摸的问题的答案What's the best way to detect a 'touch screen' device using JavaScript?

仅限Modernizr：

if (Modernizr.touch) { 
    alert('Touch Screen');
} else { 
    alert('No Touch Screen');
}

或使用jQuery＆amp; Modernizr你可以做类似的事情：

if($('html').hasClass('touch') === false) {
    //run your code here
}

Answer 2

感谢您回复aharen，我设法通过改变touchend来实现它的工作，它似乎正在按预期工作。

如何在触摸设备上滚动时停止JS触发

2 个答案: