首页 > 移动平台 > 详细

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

时间:2017-07-16 11:03:49      阅读:412      评论:0      收藏:0      [点我收藏+]

解决移动端页面滚动后不触发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。

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

原文:http://www.cnblogs.com/lxjshuju/p/7189811.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!