美文网首页
移动端防止滚动触发thouchend或单击事件

移动端防止滚动触发thouchend或单击事件

作者: 简单的源代码 | 来源:发表于2018-07-02 16:53 被阅读0次

    在移动端页面进行优化时,一般使用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;

        }

    }

    stopTouchendPropagationAfterScroll();


    额外提醒:

    在移动端,scroll事件是在滚动结束后才会触发一次。而touchmove事件是在滑动过程中多次触发。使用scroll会比使用touchmove在性能上有一定优化。

    可是。上面代码之所以不用scroll事件,而用touchmove事件。是为了同一时候适用于小于一个屏幕高度的页面。所以也是不得已使用touchmove。

    相关文章

      网友评论

          本文标题:移动端防止滚动触发thouchend或单击事件

          本文链接:https://www.haomeiwen.com/subject/zjwwoxtx.html