问题

移动端 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,DocumentWindow或者任何其他支持事件的对象 (比如 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 外,还有一个可选参数 optionsoptions 传入一个可选参数对象,主要包括四个参数,其中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:移动端阻止默认行为的小坑的更多相关文章

  1. python 函数默认值的小坑啊

    import datetime import time def test(day=datetime.datetime.now()): print day while True: test() time ...

  2. javascript小实例,阻止浏览器默认行为,真的能阻止吗?支持IE和标准浏览器的阻止默认行为的方法

    看到这标题,是不是有点逆天的感觉,总感觉好狂拽炫酷,耳边隐隐约约传来一个声音:你这么叼,你咋不上天呢! ~~ 额,好吧! 话入正题,我为什么会提出这么一个问题呢? 阻止浏览器默认行为,真的能阻止吗?那 ...

  3. 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日

    https://mp.weixin.qq.com/s/z5qm-2bHk_BCJAwaodrMIg 跨界!Omi 发布多端统一框架 Omip 打通小程序与 Web 腾讯开源 2月28日

  4. web移动端常见问题解决方案 (转)

    总结:本文总结了web移动端的常见问题并附上解决方案,包括:Meta标签.获取滚动条的值.禁止选择文本.屏蔽阴影.css之border-box.css3多文本换行.Retina屏幕高清图片.html5 ...

  5. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  6. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  7. web移动端资源整(1)

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  8. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...

  9. react 移动端 兼容性问题和一些小细节

    react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对 ...

随机推荐

  1. 【计算机组成】 Quartus II 关于总线data[][]转换多个总线data[]时不成功的问题

    xjtuse 直接使用报错: 加中间层不报错:

  2. uniapp云打包之后华为手机推送角标不显示(有推送没角标)

    小米手机上有角标,华为和OPPO没有角标 解决方法: 华为手机添加权限(可通过反编译或者离线打包添加) < uses - permission android:name="com.hu ...

  3. iOS提交AppStore审核时:提示有其他支付并隐藏功能被拒的处理办法

    背景提示:数字类产品(比如购买会员等不需要配送实物的商品),Apple规定必须使用苹果IAP应用内支付,给Apple分成30%.打包的时候不要勾选微信或支付宝等其他支付方式.如果你提交的包里包含了微信 ...

  4. EDP转LVDS屏转接线或者转接板方案|CS5211替代PS8625|PS8622|CS5211

    PS8625 (DP至LVDS)是一款DisplayPort到LVDS转换器方案芯片, 可实现双通道DP输入,双链路LVDS输出.同时PS8625是一个显示端口到LVDS转换器设计的PC机,利用GPU ...

  5. contos mongodb 安装

    创建.repo文件,生成mongodb的源 vi /etc/yum.repos.d/mongodb-org-4.0.repo [mongodb-org-4.0] name=MongoDB Reposi ...

  6. 图解MongoDB集群部署原理(3)

    MongoDB的集群部署方案中有三类角色:实际数据存储结点.配置文件存储结点和路由接入结点. 连接的客户端直接与路由结点相连,从配置结点上查询数据,根据查询结果到实际的存储结点上查询和存储数据.Mon ...

  7. Pytest_Hook函数pytest_addoption(parser):定义自己的命令行参数(14-1)

    考虑场景: 我们的自动化用例需要支持在不同测试环境运行,有时候在dev环境运行,有时候在test环境运行: 有时候需要根据某个参数不同的参数值,执行不同的业务逻辑: 上面的场景我们都可以通过" ...

  8. CentOS7 ab压力测试安装与解释

    https://blog.csdn.net/qq_39399966/article/details/102576949 Step 1 - ab (apache benchmark) 安装 yum -y ...

  9. nginx配置指定域名访问,nginx禁止ip访问,配置空主机头 syscal

    1.大家有过这方面的困扰,就是自己的网站给其他人恶意域名解析到自己的服务器ip上. 特别不爽,那大家可以用用空主机头的方法. 先给大家看下我的nginx.conf配置 http { log_forma ...

  10. 日志收集系统系列(三)之LogAgent

    一.什么是LogAhent 类似于在linux下通过tail的方法读日志文件,将读取的内容发给kafka,这里的tailf是可以动态变化的,当配置文件发生变化时,可以通知我们程序自动增加需要增加的配置 ...