zoukankan      html  css  js  c++  java
  • 滑动页面时防止touch事件的误触问题

    问题

    在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件。

    但是,touchend事件在页面滚动时有个问题。在滚动完成后,如果当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作。

    解决方法

    解决方法就是在页面滚动时停止touchend事件冒泡,这样就可以防止触发touchend事件。

    使用方法

    引入该函数并进行调用。

    function stopTouchendPropagationAfterScroll(){
        var locked = false;
    
        window.addEventListener('touchmove', function(ev){
            locked || (locked = true, window.addEventListener('touchend', stopTouchendPropagation, true));
        }, true);
        function stopTouchendPropagation(ev){
            ev.stopPropagation();
            window.removeEventListener('touchend', stopTouchendPropagation, true);
            locked = false;
        }
    }

    另外说明

    在移动端,scroll事件是在滚动结束后才会触发一次,而touchmove事件是在滑动过程中多次触发,使用scroll会比使用touchmove在性能上有一定优化。但是,上面代码之所以不用scroll事件,而用touchmove事件,是为了同时适用于小于一个屏幕高度的页面,所以也是不得已使用touchmove。

  • 相关阅读:
    VUe兄弟通信
    vue组件之间的通信, 父子组件通信,兄弟组件通信
    js 数组 map方法
    vue生命周期
    使用JQuery获取被选中的checkbox的value值
    C#中struct和class的区别详解 (转载)
    C# 增加时间的三个方法
    c# 事件3
    C# 事件2
    C# 事件
  • 原文地址:https://www.cnblogs.com/yuan619821/p/8404390.html
Copyright © 2011-2022 走看看