移动端触发touchmove时,取消touhend事件2019年5月3日javascript1,2185前言移动端开发时用户在屏幕上的触摸事件有如下三种: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);