移动端触发touchmove时,取消touhend事件

前言

移动端开发时用户在屏幕上的触摸事件有如下三种:

  • touchstart 手指触摸屏幕时触发,即使已经有手指在屏幕上也会触发 ;
  • touchmove 手指在屏幕滑动时触发 ;
  • touchend 手指从屏幕时移开时触发 。

正常状态下这三种触摸事件的触发顺序是首先触发touchstart事件,在屏幕上滑动时触发touchmove事件,在触摸结束时出发touchend事件。

需求

  • 1、当用户点击屏幕时触发触摸事件,在触摸结束时触发touchend事件移除或增加class;
  • 2、当用户在屏幕上滑动时触发touchmove,但是在触摸结束时不触发touchend事件;

解决办法

1、首先的设定一个变量,设定为false:

let dragging = false;

2、当触发touchmove事件时将变量值设置为true:

el.addEventListener('touchmove', function() {
    dragging = true;
});

3、当触摸结束时判断变量的值,执行不同的值;

el.addEventListener('touchend', function(event) {
    event.preventDefault();
    if (dragging == false) {
        //DO something
    }
});

4、当触摸事件开始时重置变量;这一步非常关键;

el.addEventListener('touchstart', function() {
    dragging = false;
});

效果

触摸事件执行状态

触摸开始时触发touchstart,在屏幕上滑动时触发touchmove,此时触摸结束时不会触发touchend事件;在屏幕上点击时触发touchend事件。

以上代码为javascript 原生写法,也可以用jquery来写:

el.addEventListener(eventName, eventHandler);先当与$(el).on(eventName, eventHandler);

发表评论

  1. pdbn 回复

    终于更新了

    1. 智慧宫 回复

      其实我一直都在,只是没有写出来