码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-08-12 19:38:38      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:touchend

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

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

解决方法是在滚动时就给停止touchend事件冒泡,实现如下:

JavaScript

function stopTouchendPropagationAfterScroll(){
    var flag = false;
    window.addEventListener(‘touchmove‘, function(ev){
        flag || (flag = true, window.addEventListener(‘touchend‘, stopTouchendPropagation, true));
    }, false);
    function stopTouchendPropagation(ev){
        ev.stopPropagation();
        setTimeout(function(){
            window.removeEventListener(‘touchend‘, stopTouchendPropagation, true);
            flag = false;
        }, 50);
    }
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

标签:touchend

原文地址:http://blog.csdn.net/yhb241/article/details/47447337

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!