js 监听移动端web触屏事件 滑动响应
直接上例子,以vue应用为例:html: <ul> <li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)" @touchstart="touch
直接上例子,以vue应用为例:
html:
<ul>
<li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)"
@touchstart="touchstart()" @touchmove="touchmove(item)">
{{item.label}}
<label class="deleteLabel" v-show="item.deleteShow" @click="deleteOne($index)">×</label>
</li>
</ul>
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<this.items.length;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");
}
});
更多推荐
所有评论(0)