为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault()。

如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。

那么如何解决这个问题呢?不让控制台提示,而且 preventDefault() 有效果呢?
两个方案:
1、注册处理函数时,用如下方式,明确声明为不是被动的
window.addEventListener('touchmove', func, { passive: false })

2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。

 

passive event 解决方法的更多相关文章

  1. 兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法

    兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return w ...

  2. Firefox不支持event解决方法

    IE 中可以直接使用event 对象,而FF 中则不可以,解决方法之一如下: var theEvent = window.event || arguments.callee.caller.argume ...

  3. 滑动报 Unable to preventDefault inside passive event listener due to target being treated as passive 的解决方法

    google浏览器滑动出现以下问题: 解决办法如下:在html元素下添加样式 touch-action: none; html{ touch-action:none; }

  4. 浏览器兼容问题----Firefox不兼容event的解决方法

    一.event.srcElement:当前事件的源: 在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcE ...

  5. Windows 7 SP1和Windows Server 2008 SP1的Event ID 10错误的解决方法

    安装了Windows 7 Service Pack 1 (SP1) 或 Windows Server 2008 R2 Service Pack 1 (SP1)都会遇到此错误提示. "Even ...

  6. 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

  7. throw er; Unhandled 'error' event Error: listen EADDRINUSE的解决方法

    先把错误贴出来,如下: 出现此问题的原因是端口被占用,解决方法如下: 查看程序执行用到的端口的运行情况,本例是端口号3000; 占用该端口3000的进程是node,pid为244156,用kill命令 ...

  8. 滑动时候警告:Unable to preventDefault inside passive event listener

    1 前言 在制作2048时,需要在手机端添加滑动检测事件,然后发现控制台有警告,如下: main2048.js:218 [Intervention] Unable to preventDefault ...

  9. 移动端页面滑动时候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.

    移动端项目中,在滚动的时候,会报出以下提示: [Intervention] Unable to preventDefault inside passive event listener due to ...

随机推荐

  1. perl 安装LOG4perl 模块

    环境信息 ubuntu 12.04 64位 桌面版 Log-Log4perl 的介绍网址:http://search.cpan.org/~mschilli/Log-Log4perl-1.49/lib/ ...

  2. PJzhang:尽快发现并下架那些侵犯公司权利的假冒APP

    猫宁!!! 参考链接:https://www.freebuf.com/articles/paper/203358.html http://www.cac.gov.cn/2019-01/25/c_112 ...

  3. 基于java开发的在线题库系统tamguo

    简介 探果网(简称tamguo)是基于java开发的在线题库系统,包括 在线访问 后台运营 会员中心 书籍中心 管理员账号:system 密码:123456 因为线上数据和测试数据没有做到隔离,作者已 ...

  4. dom4j的下载 在线文档 创建用户库

  5. hdu 6299 Balanced Sequence( 2018 Multi-University Training Contest 1 )

    #include <stdio.h> #include <iostream> #include <cstdlib> #include <cmath> # ...

  6. java操作redis实现和mysql数据库的交互

    连接地址http://blog.csdn.net/kingcat666/article/details/77936970

  7. memcpy/memmove?快速乘?

    memcpy?memmove? //#pragma GCC optimize(2) #include<bits/stdc++.h> using namespace std; ; ],b[n ...

  8. max713镍氢电池充电管理IC

    PDF:https://datasheets.maximintegrated.com/en/ds/MAX713SWEVKIT.pdf http://www.ixueshu.com/document/b ...

  9. JavaScript Allongé 第一呷 :基础函数 (3) 未完

    闭包与域是时候来看下一个带函数的函数是如何工作的: (function (x) { return function (y) { return x } })(1)(2) //=> 1 首先,我们使 ...

  10. PHP中的文件操作

      文件系统的概述 任何类型的变量在运行的时候都是将其加载到内存里面.但是内存有一个特点:CPU读取内存的速度很快,但是一旦断电,内存里面的数据就会消失.如果要持久的保存数据,有两种方法:将数据存储到 ...