Web:移动端阻止默认行为的小坑
问题
移动端 web 开发中,使用 addEventListener 阻止了 touchstart 事件的默认行为却发现没有生效
描述
再移动端 web 开发中,我们一般会用 addEventListener
给 document 节点的 touchstart
事件设置 preventDefault()
方法以达到禁用事件默认行为的目的,但有时候会发现在 chrome 移动端模拟器或者手机浏览器上事件的默认行为并没有成功禁用。
document.addEventListener("touchstart", function (ev) {
ev = ev || event;
ev.preventDefault();
});
原因
首先来看下 MDN 中 addEventListener()
方法的描述:
EventTarget.addEventListener()
EventTarget.addEventListener() 方法将指定的监听器注册到
EventTarget
上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素Element
,Document
和Window
或者任何其他支持事件的对象 (比如XMLHttpRequest
)。
addEventListener()
的工作原理是将实现EventListener
的函数或对象添加到调用它的EventTarget
上的指定事件类型的事件侦听器列表中。语法
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, useCapture, wantsUntrusted ); // Gecko/Mozilla only
addEventListener()
除了事件类型 type 和 回调函数 listenner 外,还有一个可选参数 options
,options
传入一个可选参数对象,主要包括四个参数,其中preventDefault()
不生效问题就是有 passive
这个参数引起的。
tartget.addEventListenner(type, listener, {
capture: Booolean,
once: Boolean,
passive: Boolean,
signal: AbortSignal
})
passive
用于控制是否调用 preventDefault()
,在以前,passive
默认是为 true,即 addEventListener()
中写了 event.preventDefault()
会被正常调用。后来,人们发现 passive
设置为 true 会降低滚屏性能。为什么呢?事件监听器在监听事件时,并不能提前知道回调函数中是否会阻止默认行为,因此若想知道是否会阻止就需要等待函数执行完,这段时间虽然很短,但等待仍会让人感到卡顿。卡顿对比请看下图。而大部分事件监听器是不会阻止默认行为的,所以大部分情况下页面因为等待是否会有 preventDefault()
是完全没必要的,会影响大部分情况下的体验。为解决卡顿问题,某些浏览器就将一些节点事件的 passive
默认为 true,即使函数中使用了 preventDefault()
也会被无视,因为看到 preventDefault()
时浏览器可能已经执行了默认行为,总不能撤回吧(doge) 。
解决方案
前面扯了这么多,但解决很简单,把 passive
设置为 false 传进监听器就行了
document.addEventListener("touchstart", function (ev) {
ev = ev || event;
ev.preventDefault();
}, {passive: false});
参考文献
1. MDN Web Docs:EventTarget.addEventListener()
2. MDN Web Docs:使用 passive 改善的滚屏性能
Web:移动端阻止默认行为的小坑的更多相关文章
- python 函数默认值的小坑啊
import datetime import time def test(day=datetime.datetime.now()): print day while True: test() time ...
- javascript小实例,阻止浏览器默认行为,真的能阻止吗?支持IE和标准浏览器的阻止默认行为的方法
看到这标题,是不是有点逆天的感觉,总感觉好狂拽炫酷,耳边隐隐约约传来一个声音:你这么叼,你咋不上天呢! ~~ 额,好吧! 话入正题,我为什么会提出这么一个问题呢? 阻止浏览器默认行为,真的能阻止吗?那 ...
- 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日
https://mp.weixin.qq.com/s/z5qm-2bHk_BCJAwaodrMIg 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日
- web移动端常见问题解决方案 (转)
总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- 【转载】Web移动端Fixed布局的解决方案
特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...
- web移动端资源整(1)
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 从web移动端布局到react native布局
在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...
- react 移动端 兼容性问题和一些小细节
react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对 ...
随机推荐
- Web 网站进化
01-初始阶段 应用程序.数据库.文件等所有资源都在一台服务器上 02-应用服务与数据服务分离 应用服务器 要处理大量的业务逻辑,所以需要更好更快更强大的 CPU 数据库服务器 需要快速的进行磁盘 ...
- 「THUSCH 2017」大魔法师
Description 大魔法师小 L 制作了 \(n\) 个魔力水晶球,每个水晶球有水.火.土三个属性的能量值.小 L 把这 \(n\) 个水晶球在地上从前向后排成一行,然后开始今天的魔法表演. 我 ...
- Proximal Algorithms 3 Interpretation
目录 Moreau-Yosida regularization 与次梯度的联系 改进的梯度路径 信赖域问题 Proximal Algorithms 这一节,作者总结了一些关于proximal的一些直观 ...
- matplotlib 高阶之path tutorial
目录 Bezier example 用path来画柱状图 随便玩玩 import matplotlib.pyplot as plt from matplotlib.path import Path i ...
- 安装并配置 Android Studio 开发工具和 Genymotion 模拟器
需求说明: 安装并配置 Android Studio 开发工具和 Genymotion 模拟器. 熟练使用 Genymotion 模拟器,掌握 Genymotion 模拟器的基本设置和程序安装. 实现 ...
- Java初学者作业——编写Java程序,简单判断“王者荣耀”英雄收到攻击后是否死亡
返回本章节 返回作业目录 需求说明: 判断"王者荣耀"中英雄受到攻击后是否死亡? 计算"王者荣耀"中怪物攻击英雄的伤害,做出英雄死亡的判断. 如果英雄受到过量伤 ...
- MySQL数据库基础(2)表结构管理
目录 一.关系模型与数据表 二.MySQL数据类型 三.数据完整性约束 四.参照完整性约束 一.关系模型与数据表 概念 ①关系模型:是由若干个关系模式组成的集合,关系模式的实例称为关系,每个关系实际上 ...
- 基于GO语言实现的支持高并发订单号生成函数
1.固定24位长度订单号,毫秒+进程id+序号. 2.同一毫秒内只要不超过一万次并发,则订单号不会重复. github地址:https://github.com/w3liu/go-common/blo ...
- MyBatis 一级缓存实现详解及使用注意事项
一级缓存介绍 在应用运行过程中,我们有可能在一次数据库会话中,执行多次查询条件完全相同的SQL,MyBatis提供了一级缓存的方案优化这部分场景,如果是相同的SQL语句,会优先命中一级缓存,避免直接对 ...
- 小程序云开发请求第三方http或https接口
1.新建http云函数,选中http云函数,右键,打开终端,安装依赖: npm install request-promise 2.http.js引入request-promise用于做网络请求 va ...