阻止默认行为 e.preventDefault()搭配passive:false才有效

大猫会长

已于 2024-03-20 15:24:07 修改

阅读量647

点赞数 1

文章标签： javascript 前端开发语言

于 2024-03-20 13:59:23 首次发布

本文链接：https://blog.csdn.net/aexwx/article/details/136873749

版权

文章讲述了在处理touchmove事件时，如何正确使用`e.preventDefault()`配合`passive`属性以防止默认行为，同时讨论了不同设置下可能出现的警告。重点在于理解passive选项在被动监听器中的作用及其对阻止默认行为的影响。

摘要由CSDN通过智能技术生成

正确情况

如果想阻止默认行为,那么 e.preventDefault()搭配passive:false才是正解

document.addEventListener('touchmove',(e)=>{
e.preventDefault()
console.log('======123',123);},{passive:false})

如果搭配 passive:false,则会报警告

e.preventDefault()搭配passive:true会报警告
Unable to preventDefault inside passive event listener invocation

如果只阻止默认事件,第3个选项不写,也会警告

document.addEventListener('touchmove',(e)=>{
e.preventDefault()
console.log('======123',123);})

参考资料

关于passive event listener的一次踩坑 - 掘金

滑动验证页面

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大猫会长

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

滑动警告：Unable to preventDefault inside passive event listener

vicky_pyh的博客

04-24

1862

在项目上看到 chrome 的控制台看到如下提示：翻译过来就是：不能给passive(被动的)事件监听器preventDefault，因为它被认为是passive。下面我们来了解一下passive和preventDefault 很久以前，addEventListener() 的参数约定是这样的： addEventListener(type, listener, useCapture) 后来，...

JQuery事件e参数的方法preventDefault()取消默认行为

10-26

JQuery事件的e参数的方法preventDefault()可以取消对象的默认行为，下有个不错的示例，大家可以参考下，希望对大家有所帮助

参与评论您还未登录，请先登录后发表或查看评论

preventDefault() 方法

07-25

1714

定义和用法取消事件的默认动作。语法event.preventDefault()说明该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动

JavaScript语言中preventDefault() 方法有什么作用？

最新发布

csdn_Levy的博客

09-29

247

另一个常见的例子是在表单提交时。默认情况下，当你提交一个表单时，浏览器会刷新页面。但如果你希望在不刷新页面的情况下提交表单（例如，使用 AJAX 来提交表单），你可以使用。例如，当你点击一个链接时，浏览器的默认行为是跳转到链接的URL。但如果你希望在用户点击链接时执行一些额外的操作，而不是直接跳转，你可以使用。它的作用是阻止浏览器对某些事件执行其默认的行为。在这个例子中，当用户点击链接时，我们阻止了链接的默认点击行为（跳转到链接的URL），而是打印了一条消息。请注意，不是所有的事件都有默认行为，所以。

e.preventDefault();

chenchengdexiaoxiao的博客

02-11

281

比如一个button放在一个form中，这个button的Default就是提交（submit），但如果你不想让他提交，就可以用e.preventDefault(); 打个比方： $(document).ready(function(){ $("button").click(function(e){ $("...

e.preventDefault()阻止默认行为

czlj1998的博客

09-25

1675

因此，通过在输入框的onKeyUp事件中检查keyCode是否为13（回车键的keyCode为13），如果是，则使用preventDefault()方法阻止默认行为，即阻止表单提交。例如，你可以在按下回车键时阻止表单的默认提交行为，或者在按下空格键时阻止滚动页面的默认行为。，可以阻止链接的默认跳转行为，从而允许你在点击链接时执行自定义操作，比如打开一个模态框或执行一些其他逻辑。按钮点击：在处理按钮点击事件时，有时你可能希望阻止按钮的默认提交行为或页面刷新行为。表单提交：在处理表单提交事件时，通过调用。

e.preventDefault

qq_22912891的博客

05-09

2064

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。下面是案例： "text/javascript"> $(function(){ $("#sub").bind("click",function(event){

EasyPlayer-lib.min.js:1 Unable to preventDefault inside passive event listener invocation.

05-24

在被动模式下，无法使用preventDefault()方法来阻止默认行为，因为这可能会导致滚动卡顿。要解决这个问题，你可以尝试使用addEventListener()方法来注册事件处理程序时，将第三个参数设置为{passive:false}，这会...

[js] 阻止默认事件 preventDefault()

qq_14993591的博客

09-09

244

1, a标签的点击效果 2, 鼠标右键弹出菜单 3, form标签点击提交 <a href="https://www.baidu.com">百度</a> <form action="./01_复习.html"> <button type="submit">提交</button> </form> 阻止超链接的点击效果 var oA = document.querySelector('a');

document.body.addEventListener('mousewheel', function(e){ e.allowDefault() }, { passive: false }); 反过来怎么写

06-09

如果你想要在事件处理程序中允许默认事件行为，需要在事件处理程序中添加一个条件判断，只有当满足特定条件时才阻止默认事件行为。例如，你可以在 mousewheel 事件处理程序中添加如下代码： ``` document.body....

e.preventdefault()别滥用

webot1的博客

09-18

229

有的时候我们会为事件回调函数添加一个参数（通常是e），并在函数中加入e.preventdefault()；由于习惯，我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同，在IE8上出现了一个bug：change事件能进入，但是UI显示上不能讲复选框的选中状态重绘。分析原因，是我的e.preventdefault()阻止了状态重绘。checkbox 、radio的状态变化(并非所有浏览器)。

preventDefault()

zozo_的博客

10-11

922

preventDefault()是一个 JavaScript 方法，常用于阻止事件的默认行为。

【JS基础】e.preventDefault() 阻止默认操作

热门推荐

Milk~每天分享一点点，技术进步一点点

08-05

3万+

阻止默认操作默认操作具体指的是什么呢？看如下实例：把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。在这种情况下，处理方法有： 1.w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false pre

video-js-8f3991b0.js:36 Unable to preventDefault inside passive event listener invocation.

06-22

这个错误意味着你在试图使用 `event.preventDefault()` 来阻止某个默认行为，但因为事件是在被动监听模式下触发的，所以阻止默认操作不再有效。解决这个问题的方法通常是： 1. **禁用被动监听**：如果你确实需要...

阻止事件的默认行为event.preventDefault

Focus-Fe

03-03

478

很多时候，我们需要阻止一些事件的默认行为，比如有的时候一些锚链接等等。兼容性相关的可以参考：http://zhangyaochun.iteye.com/blog/1163331 event的知识参考：http://zhangyaochun.iteye.com/blog/1439502 /* *preventDefault -- stop th...

e.preventDefault()是什么

weixin_42610010的博客

12-31

2537

e.preventDefault() 是一个 JavaScript 函数，它可以阻止浏览器的默认行为。例如，当你点击一个超链接时，浏览器会自动跳转到超链接指向的页面，这就是浏览器的默认行为。如果你希望在点击超链接时不跳转，可以在超链接的事件处理函数中使用 e.preventDefault() 来阻止浏览器的默认行为。例如，假设你有一个超链接： <a href="/some/page"&gt...

关于e.preventDefault()方法

weixin_43821171的博客

09-22

8007

背景：同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。问题：为什么我在父组件上使用pr