• 解决移动端页面滚动后不触发touchend事件


    解决移动端页面滚动后不触发touchend事件

    问题

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

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

    解决方法

    解决方法非常easy。就是在页面滚动时停止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。

  • 相关阅读:
    01 背包问题
    神奇的口袋[dp]
    2019考研西交大软件工程
    计算机考研有哪些值得推荐的院校?
    考研-政治经验贴***
    考研-英语经验贴2.0
    考研-作息时间安排表(总结)
    考研-英语经验贴(总结)
    考研-数学经验贴(总结)
    考研-专业课经验贴
  • 原文地址:https://www.cnblogs.com/lxjshuju/p/7189811.html
Copyright © 2020-2023  润新知