为了让页面滚动的效果如丝般顺滑,从 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. physics(2018.10.27)

    这道题可以推出\(O(1)\)的算法,但是实际上暴力模拟就可以过了. 代码(暴力模拟): #include<cstdio> #include<algorithm> #inclu ...

  2. D - Fliptile

    #include <stdio.h> #include <iostream> #include <math.h> #include <algorithm> ...

  3. sQL存储过程的优缺点

    目前具体的项目中没有使用sql存储过程,都用的封装好的框架,简单说下存储过程的优缺点. 优点: 1.存储过程只在创造时进行编译,以后每次执行存储过程都不需再重新编译,而一般 SQL 语句每执行一次就编 ...

  4. Guard Duty (medium) Codeforces - 958E2 || (bzoj 2151||洛谷P1792) 种树 || 编译优化

    https://codeforces.com/contest/958/problem/E2 首先求出N个时刻的N-1个间隔长度,问题就相当于在这些间隔中选K个数,相邻两个不能同时选,要求和最小 方法1 ...

  5. bzoj3583 杰杰的女性朋友 || bzoj4362 Graph

    http://210.33.19.103/problem/2174 很显然是矩阵快速幂的题,设有in和ou矩阵,设in矩阵的转置为in' 显然可以直接暴力求出任意两点间走一步路径条数,然后求其d次幂, ...

  6. 转 PHP 正则表达式 以及案例

    2.Perl兼容的语法扩充 Perl兼容的正则表达式的模式类似于Perl中的语法,表达式必须包含在定界符中,除数字.字母.反斜线外的任何字符都可以作为定界符.例如,表达式’/^(?i)php[34]/ ...

  7. JAVA常用知识总结(九)——线程

    sleep和wait的区别? sleep()来自Thread类,和wait()来自Object类.调用sleep()方法的过程中,线程不会释放对象锁.而 调用 wait 方法线程会释放对象锁 slee ...

  8. 关于pycharm的一个imoprt的随笔

    近来发现pycharm一个方便的地方,from 文件夹名.组件名 import 方法(引入和父级目录同级文件夹下的模块),在pycharm中这种引用是能够成功的,但是在python自带的IDLE中不能 ...

  9. 538 Convert BST to Greater Tree 把二叉搜索树转换为累加树

    给定一个二叉搜索树(Binary Search Tree),把它转换成为累加树(Greater Tree),使得每个节点的值是原来的节点值加上所有大于它的节点值之和.例如:输入: 二叉搜索树:     ...

  10. PHP知识点总结3

    PHP 函数 PHP 的真正威力源自于它的函数. 在 PHP 中,提供了超过 1000 个内建的函数. <html> <body> <?php function writ ...