解决移动端页面滚动后不触发touchend事件
问题
在移动端页面进行优化时，一般使用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;
}
}另外说明
在移动端，scroll事件是在滚动结束后才会触发一次，而touchmove事件是在滑动过程中多次触发，使用scroll会比使用touchmove在性能上有一定优化。但是，上面代码之所以不用scroll事件，而用touchmove事件，是为了同时适用于小于一个屏幕高度的页面，所以也是不得已使用touchmove。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
