swipe事件

jQuery Mobile:

$("p").on("swipe",function(){

$(this).hide();

});

swipe事件源码：

HTMLElement.prototype.swipe = HTMLElement.prototype.swipe || function (callBack) {
 let isTouchMove, startTx, startTy;
 this.addEventListener('touchstart', function (e) {
 let touches = e.touches[0];

 startTx = touches.clientX;
 startTy = touches.clientY;
 isTouchMove = false;
 }, false);

 this.addEventListener('touchmove', function (e) {
 isTouchMove = true;
 e.preventDefault();
 }, false);

 this.addEventListener('touchend', function (e) {
 if (!isTouchMove) {
 return;
 }

 let touches = e.changedTouches[0],
 endTx = touches.clientX,
 endTy = touches.clientY,
 distanceX = startTx - endTx
 distanceY = startTy - endTy,
 isSwipe = false;

 if (Math.abs(distanceX) >= Math.abs(distanceY)) {
 if (distanceX > 20) {
 callBack('left')
 console.log('fire swipe left event');
 isSwipe = true;
 } else if (distanceX < -20) {
 callBack('right')
 console.log('fire swipe right event');
 isSwipe = true;
 }
 } else {
 if (distanceY > 20) {
 callBack('up')
 console.log('fire swipe up event');
 isSwipe = true;
 } else if (distanceY < -20) {
 callBack('down')
 console.log('fire swipe down event');
 isSwipe = true;
 }
 }

 if (isSwipe) {
 console.log('fire swipe event');
 }
 }, false);
 }

 let box = document.querySelector('.box')
 box.swipe(function (direct) {
 // your code ...
 console.log('swipe 触发了' + direct)
 })