Simple Swipe Event Listener

SwipeListener.js

// Swipe listener for mobile touch events
// run in chrome console in mobile mode and swipe at the current page body
function SwipeListener(targetId, fn){
	this.startX = 0;
	this.startY = 0;
	this.swipeEventCb = fn;
	
	this.gestureZone = document.querySelector(targetId);
	this.start();
}

SwipeListener.prototype = {
	// Start shows you can bind only once and add remove event listeners all you want.
	start: function() {
		//Function.prototype.bind creates new function instance,
		//we need to keep a reference else removeEventListener can't remove them
		if (!this.handleTouchStartBind) {
			this.handleTouchStartBind = this.handleTouchStart.bind(this);	
		}
		if (!this.handleTouchEndBind) {
			this.handleTouchEndBind = this.handleTouchEnd.bind(this);
		}

		this.gestureZone.addEventListener('touchstart', this.handleTouchStartBind, false);
		this.gestureZone.addEventListener('touchend', this.handleTouchEndBind, false); 
	},
    destroy: function(){
        if (this.gestureZone) {
            this.gestureZone.removeEventListener('touchstart', this.handleTouchStartBind);
            this.gestureZone.removeEventListener('touchend', this.handleTouchEndBind);
        }
    },

	handleTouchStart: function (e) {
	  startX = e.changedTouches[0].screenX;
	  startY = e.changedTouches[0].screenY;
	},

	handleTouchEnd: function (e) {
	  const diffX = e.changedTouches[0].screenX - startX;
	  const diffY = e.changedTouches[0].screenY - startY;
	  const ratioX = Math.abs(diffX / diffY);
	  const ratioY = Math.abs(diffY / diffX);
	  const absDiff = Math.abs(ratioX > ratioY ? diffX : diffY);

	  // Ignore small movements.
	  if (absDiff < 30) {
		return;
	  }

	  if (ratioX > ratioY) {
		if (diffX >= 0) {
		  console.log('right swipe');
		  this.swipeEventCb('right');
		} else {
		  console.log('left swipe');
		  this.swipeEventCb('left');
		}
	  } else {
		if (diffY >= 0) {
		  console.log('down swipe');
		  this.swipeEventCb('down');
		} else {
		  console.log('up swipe');
		  this.swipeEventCb('up');
		}
	  }
	}
};


// DEMO
var cnt = 0;
var bodySwipe = new SwipeListener('body', function(event){
    console.log("GOT EVENT:", event);
    if(cnt++ > 3){
        console.log("STOPING SwipeListener!");
        bodySwipe.destroy();
        cnt = 0;
    }
});