移动端拖动时触发点击事件问题处理

项目场景：

移动端的tab栏或者下拉选择栏，或者滚动时页面有点击事件的元素

---

问题描述：

移动端的tabs滑动时会选中拖动时的选项，实际需要往后滑动选择后面内容，但是停止滑动后tabs已经切换

---

原因分析：

知识点准备：

一般移动端的点击事件有click、touch系列、tap系列；一般会使用touchend代替cilck，至于为什么感兴趣的可以去了解一下，我后续的文章会讲解；

产生问题的额原因：

拖动事件是touchmove，但拖动也有产生相应的touch事件，那么拖动完之后touchend冒泡，就会触发相应点击事件，如果你点击事件用的是touchstart那么你还没开始拖动就触发了点击事件（别问我怎么知道的，因为我踩过这个坑）

---

解决方案：

如上分析，那么知道我们在触发touchmove时阻止touchend事件冒泡就好了，先上代码，在分析：

export const stopTouchendWhenScroll = () => {
    var dragging= false;
    window.addEventListener('touchmove', function(ev){
        if (!dragging) {
            dragging= true; 
            window.addEventListener('touchend', stopTouchendPropagation, true)
        }
  // 其他很多博客用的是这一段代码，但我我这边报错：Expected an assignment or function call and instead saw an expression, 我就改成了上面的代码，
 // locked || (locked = true; window.addEventListener('touchend', stopTouchendPropagation, true));
    }, true);
    function stopTouchendPropagation(ev){
        ev.stopPropagation();
        window.removeEventListener('touchend', stopTouchendPropagation, true);
        dragging= false;
    }
}

我这里是吧这个通用方法方法哦公共工具方法文件夹里然后导出来使用的，那个页面要用就在加载的时候调用这个方法就好了，我用的是react所以在useEffect或者componentDidmount里调用就好，看一下代码，先声明一个flag用于判断是否在拖动状态，然后注册touchmove事件，如果没有拖动也就是dragging为false时候，将dragging置为true，然后注册touchend事件，处理函数为stopTouchendPropagation，当点击后也就是不滑动dragging为false，就会形成一拖动就注册touchend事件并阻止冒泡，不触发touchend事件。