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

直接上例子，以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可参考：

转自：浅谈移动端之touch事件--手指的滑动事件

$("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");
    }
});

转载于:https://www.cnblogs.com/fifteen718/p/9533896.html