How can I stop JS triggering when scrolling on touch devices

Question

At the moment we are using the below script to create a lightweight lightbox for a wordpress site, which works perfectly on desktop, but the overlay is being triggered when just scrolling on a touch device if you scroll with your finger on one of the images, is there anyway to stop this happening?

<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

Thank you for your reply aharen, I managed to get it working by just changing touchend to tap and it seems to be working as intended now.

Answer 2

You could use a library such as Modernizr to detect touch take a look at the answer to this question on detecting touch What's the best way to detect a 'touch screen' device using JavaScript?

With Modernizr only:

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

or with the use of jQuery & Modernizr you can do something like:

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