移动端阻止默认事件
来源:互联网 发布:国内编程语言排行榜 编辑:程序博客网 时间:2024/05/21 18:35
由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟。
所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。
举例:
wnidow.addEventListener(‘touchmove’, func) 效果和下面一句一样
wnidow.addEventListener(‘touchmove’, func, { passive: true })
这就导致了一个问题:
如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。
测试:
body {
margin: 0;
height: 2000px;
background: linear-gradient(to bottom, red, green);
}
// 在 chrome56 中,照样滚动,而且控制台会有提示,blablabla
window.addEventListener(‘touchmove’, e => e.preventDefault())
那么如何解决这个问题呢?不让控制台提示,而且 preventDefault() 有效果呢?
两个方案:
1、注册处理函数时,用如下方式,明确声明为不是被动的
window.addEventListener(‘touchmove’, func, { passive: false })
2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。
touch-action 还有很多选项,详细请参考touch-action
[注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true
- 移动端阻止默认事件
- 阻止事件默认行为
- 阻止默认事件
- javascript阻止默认事件
- Angularjs 阻止默认事件
- 阻止事件默认行为
- 阻止默认事件
- 6.移动端事件--阻止冒泡
- 绑定事件、阻止默认事件、阻止冒泡
- 阻止事件冒泡 默认事件
- 阻止事件冒泡\阻止默认行为
- JQ阻止默认事件与阻止冒泡
- JS 阻止冒泡与阻止默认事件
- 阻止默认行为和阻止事件传播
- js阻止事件默认行为
- juqery 阻止默认事件发生
- 阻止事件的默认行为
- 什么叫阻止默认事件
- Web API与OAuth:既生access token,何生refresh token
- STL之String详解
- string 的常见用法
- 全排列实现
- hdu 3572 Task Schedule 最大流 Dinic算法
- 移动端阻止默认事件
- 【学堂在线数据挖掘:理论方法笔记】第八天(4.2)
- 什么是hibernate框架
- hdu5067——Harry And Dig Machine(dfs+剪枝)
- ActiveMQ(一)初步接触-编写Demo
- 指定DataTable中某些列是否同时存在重复
- DoKuWiki知识库的搭建
- 关于oem7grub 0.4.4 2009-11-18,memory:639k/30 的问题的解决
- 蓝桥杯ALGO-3 K好数(dp)