如何在觸摸設備上滾動時停止JS觸發

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 & Modernizr你可以這樣做：

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

Answer 2

謝謝你的回覆aharen，我設法通過改變touchend來實現它的工作，現在它似乎按預期工作。