html滑动事件监听,js 监听移动端web触屏事件 滑动响应

直接上例子，以vue应用为例：

html:

• @touchstart="touchstart()" @touchmove="touchmove(item)">

  {{item.label}}

  ×

js:

touchstart: function () {

var e = window.event;

// e.preventDefault();

startX = e.targetTouches[0].pageX;

startY = e.targetTouches[0].pageY;

},

touchmove: function (item) {

var e = window.event;

// e.preventDefault(); // 阻止浏览器默认事件

moveEndX = e.targetTouches[0].pageX;

moveEndY = e.targetTouches[0].pageY;

X = moveEndX - startX;

Y = moveEndY - startY;

if (Math.abs(X) > 120 && Math.abs(X) > Math.abs(Y) && X > 0) {

if(item.deleteShow == true){

console.log("右滑事件");

item.deleteShow = false;

};

} else if (Math.abs(X) > 120 && Math.abs(X) > Math.abs(Y) && X < 0) {

if(item.deleteShow == false){

for(var i=0;i

if(this.items[i].deleteShow == true){

this.items[i].deleteShow = false;

}

};

console.log("左滑事件");

item.deleteShow = true;

}

}

}

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

jquery可参考：

$("body").on("touchstart", function(e) {

e.preventDefault();

startX = e.originalEvent.changedTouches[0].pageX,

startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove", function(e) {

e.preventDefault();

moveEndX = e.originalEvent.changedTouches[0].pageX,

moveEndY = e.originalEvent.changedTouches[0].pageY,

X = moveEndX - startX,

Y = moveEndY - startY;

if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {

alert("left 2 right");

}

else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {

alert("right 2 left");

}

else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {

alert("top 2 bottom");

}

else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {

alert("bottom 2 top");

}

else{

alert("just touch");

}

});