让移动端页面滚动后不触发touchend事件的方法
来源:互联网 发布:金庸小说排名 知乎 编辑:程序博客网 时间:2024/06/05 14:32
在移动端页面进行优化时,一般使用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。
阅读全文
0 0
- 让移动端页面滚动后不触发touchend事件的方法
- 解决移动端页面滚动后不触发touchend事件
- 解决移动端页面滚动后不触发touchend事件
- 如何让touchmove之后不触发touchend的事件
- 移动端touchmove事件边界touchend不触发
- 移动端开发踩坑日记——安卓4.4.2不触发touchend事件
- 解决滑动时不触发touchend事件的bug
- 解决移动端滚动页面释放时所触发的tounchend事件
- 移动web相关touch事件触发(touchstart/touchmove/touchend)
- WEB移动端的click ,tap ,touchend事件的对比
- 移动端touchstart、touchend触摸事件的简单使用
- 滚动条移动触发事件
- 页面装载完成后触发的事件
- 关于touch事件的使用 (touchStart touchMove touchEnd(不触发 android 4.0以上)) 滑动的使用
- 【 H5踩坑 】Dom变更引起的 touchend 不触发
- 关闭页面和刷新页面后 触发服务器事件 采用body的onbeforeunload()方法
- 用jq让移动端和PC端遮罩层弹出后页面禁止滚动
- 移动互联网终端的touch事件,touchstart, touchend, touchmove
- [NOIP模拟][LCA]一样远
- codeforces 602 D. Lipshitz Sequence
- python里使用正则表达式的分组命名方式
- java 常用集合list与Set、Map区别及适用场景总结
- UVA 136 丑数
- 让移动端页面滚动后不触发touchend事件的方法
- jq 城市列表
- jquery ajax的简单使用
- 小游戏:扫雷 (C语言实现扫雷的基本功能)
- Delphi FrieDAC 大数据处理
- python学习--list
- 文章标题
- 类初始化步骤
- 数据结构与算法(Java描述)-11、串的基本概念以及串存储结构