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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,574评论 1 11
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,535评论 0 4
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,255评论 0 21
  • 几十年前,在美国只有三分之一的人选择独居,目前已超过人口半数:根据美国劳工统计局数据,截至2015年8月,16岁...
    长风破浪1阅读 396评论 0 0
  • 1、批评别人是最愚蠢的行为 批评是危险的,因为它常常伤害一个人宝贵的自尊,并激起对方的强烈反抗。我们不要去责备别人...
    宁静致远hfm阅读 241评论 4 6