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)


相关推荐

  • 公众号微信平台开发_订阅号 小程序

    公众号微信平台开发_订阅号 小程序微信公众号应用开发

  • ubuntu18.04安装教程csdn_window10 安装

    ubuntu18.04安装教程csdn_window10 安装这篇文章分享自己在Windows10系统下安装VMware虚拟机,然后在VMware中安装Ubuntu18.04LTS的详细过程。之所以选择在虚拟机中安装Ubuntu,主要是可以不影响自己电脑的正常使用,而且在虚拟机中可以大胆尝试任何操作,不用担心造成不可逆转的破坏,大不了删除重新再来而已。Ubuntu18.04LTS于2018年4月底发布,其代号为BionicBe…

  • 字典树和前缀树_前缀树和后缀树

    字典树和前缀树_前缀树和后缀树从Trie树(字典树)谈到后缀树作者:July、yansha。出处:http://blog.csdn.net/v_JULY_v 。 引言   常关注本blog的读者朋友想必看过此篇文章:从B树、B+树、B*树谈到R树,这次,咱们来讲另外两种树:Tire树与后缀树。不过,在此之前,先来看两个问题。   第一个问题:一个文本文件,大约有一万行,每行一个词,要求统计出其中最频繁出现的前10个词,

  • linux中pushd和popd用法,在Linux中使用pushd和popd命令操作目录的用法

    linux中pushd和popd用法,在Linux中使用pushd和popd命令操作目录的用法pushd将目录压入目录栈,进行目录切换命令用法:pushd[-n][+N|-N|dir]参数:+n切换目录,以当前目录为准,从右向左数第n个-n切换目录,以当前目录为准,从左向右数第n个例:复制代码代码如下:[root@localhostzhangy]#pushd/root~/home/zhangy#这个符号~代表根home目录复制代码代码如下:[root…

  • Typora设置图片存储路径「建议收藏」

    Typora设置图片存储路径「建议收藏」Typora设置图片存储路径Typora设置图片存储路径Typora设置图片存储路径最近经常在用Typora编写文档,每次剪切的图都是默认保存在C盘中Typora默认的保存图片的文件夹中,每次找起来不是很方便,所有最近想设置下剪切图片保存的位置。因为这东西不常用,想想还是记录下来点击文件,选择偏好设置原来是无特殊操作,个人还是倾向于选择图中选项选择此选项后会,在md文档所在文件夹中…

  • appsettings与connectionstrings

    appsettings与connectionstrings这篇文章源于我在做一个手机号码归属地的例子时用到了配置文件,于是像视频上说的那样,我在app.config中写下了这段代码:可是却出现了在运行中弹出这样的错误提示:    很是郁闷,查了很多资料,反复看自己写的代码,可就是不知道到底错哪儿了,于是找了大神帮我查了,用大话设计模式中的配置文件方法做了修改,结果程序可以跑起来了:

发表回复

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

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