美文网首页
移动端防止滚动触发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或单击事件

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

  • 移动端事件(2019.4.2)

    一、 基础事件 1.click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200...

  • 移动端事件

    一、 基础事件 1.click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200...

  • 移动端前端常见的触摸事件

    (1)click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200-300ms的...

  • 移动端事件总结

    1. click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 30...

  • 移动端事件

    1. click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200ms ~ 30...

  • 2018-01-23

    移动端事件 一、事件定义及分类 1. click事件 单击事件,类似于PC端的click,但在移动端中,连续cli...

  • 事件

    事件触发方法:onclick="单击触发事件";ondblclick="双击触发事件";onmousedown="...

  • 移动端H5输入框踩坑总结

    本文介绍移动端输入框 上触发的与用户输入有关的事件,总结移动端与pc端上这些事件的差别,主要关注点在事件触发的顺序...

  • 移动端滚动事件

    原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY; 当触发t...

网友评论

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

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