Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?

Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?翻译一下:chrome监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome浏览器报错。说明:说一下这个preventDefault()是个什么鬼,这个是取消默认事件的,如果这个函数起作用的,比如默认的表单提交,a链接的点击跳转,就不好用了。原因:google浏览器为了最快速的相应touch事件,做出的改变。历史:当浏览器首先对默认的事件进行响应的…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

翻译一下:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。
说明:说一下这个 preventDefault()是个什么鬼,这个是取消默认事件的,如果这个函数起作用的,比如默认的表单提交,a链接的点击跳转,就不好用了。

原因:google浏览器为了最快速的相应touch事件,做出的改变。
历史:当浏览器首先对默认的事件进行响应的时候,要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。
现在:google就决定默认取消了对这个事件的检查,默认时间就取消了。直接执行滑动操作。这样就更加的顺滑了。
但是浏览器的控制台就会进行错误提醒了。

具体情况:
从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

导致下面的效果一致:

wnidow.addEventListener('touchmove', func) 效果和下面一句一样
wnidow.addEventListener('touchmove', func, { passive: true })

Jetbrains全家桶1年46,售后保障稳定

这样会出现新的问题:

如果在以上这 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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/200880.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java修饰符

    java修饰符

    2021年11月12日
  • matlab 矩阵除法求方程组的解,线性方程组求解矩阵除法.PPT

    matlab 矩阵除法求方程组的解,线性方程组求解矩阵除法.PPT线性方程组求解矩阵除法第二章MATLAB编程与作图MATLAB数学实验第三章矩阵代数第三章矩阵代数3.1预备知识:线性代数3.2矩阵代数的MATLAB指令3.3计算实验:线性方程组求解3.4建模实验:投入产出分析和基因遗传3.1预备知识:线性代数线性方程组记为Ax=b3.1预备知识:线性代数线性方程组若秩(A)?秩(A,b),则…

  • 5个最佳拖放式WordPress网页生成器比较(2018)

    5个最佳拖放式WordPress网页生成器比较(2018)你想要一个简单的方法来建立和定制你的WordPress网站?这就是拖放WordPress网页生成器插件派上用场的地方。这些WordPress网页生成器允许您在不编写任何代码的情况下创建、编辑和自定义您的网站布局。在本文中,我们将比较和回顾5个最好的WordPress拖放网页构建器。为什么使用拖放页面生成器的WordPress?当开始一个博客时,许多WordPress初学者发现很难在他们的网站上更改或自定义页面布局。虽然很多优质的WordPress主题都有不同的页面布局,但对于不懂HTML代码的人来说,

  • 快速刷微信小程序访问量和浏览量

    快速刷微信小程序访问量和浏览量1、先开发小程序,小程序需要有亮点,毕竟新颖(这样别人才更好去点击查看)。2、流量主开通的条件是独立访客(UV)不低于1000,1000人说多不多,说少也不少,因为小程序是没有链接的,是不可以进行一个流量刷取的,独立访客是需要1000个实实在在的用户,并不是访问量。3、开发好小程序之后,自己要为自己的小程序做好宣传,前提小程序需要做的完美,小程序一定要做分享功能,将小程序分享到个人、微信群、朋友圈,这样估计很容易就达到几百了。4、后续可以去各种论坛发帖,切记不要恶意刷用户量,会导致小程序被封。5

  • 设计模式(4)-对象创建型模式-Prototype模式

    设计模式(4)-对象创建型模式-Prototype模式

  • 怎么创建CSV文件和怎么打开CSV文件[通俗易懂]

    怎么创建CSV文件和怎么打开CSV文件[通俗易懂]CSV(CommaSeparatedValues逗号分隔值)。.csv是一种文件格式(如.txt、.doc等),也可理解.csv文件就是一种特殊格式的纯文本文件。即是一组字符序列,字符之间已英文字符的逗号或制表符(Tab)分隔。在windows系统环境上.csv文件打开方式有多种,如记事本、excel、Notepad++等,只要是文本编辑器都能正确打开。1.工具/原料E…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号