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

已于 2024-03-20 15:24:07 修改
阅读量468 收藏
点赞数 1
文章标签： javascript 前端 开发语言
于 2024-03-20 13:59:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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的一次踩坑 - 掘金

滑动验证页面

大猫会长
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【JS基础】e.preventDefault() 阻止默认操作
Milk~每天分享一点点，技术进步一点点
08-05 3万+
阻止默认操作 默认操作 具体指的是什么呢？看如下实例： 把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。 当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。 在这种情况下，处理方法有： 1.w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false pre
JQuery事件e参数的方法preventDefault()取消默认行为
10-26
JQuery事件的e参数的方法preventDefault()可以取消对象的默认行为，下有个不错的示例，大家可以参考下，希望对大家有所帮助
e.preventDefault
qq_22912891的博客
05-09 1991
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。 下面是案例： "text/javascript"> $(function(){ $("#sub").bind("click",function(event){
e.preventDefault();
chenchengdexiaoxiao的博客
02-11 258
比如一个button放在一个form中，这个button的Default就是提交（submit），但如果你不想让他提交，就可以用e.preventDefault(); 打个比方： $(document).ready(function(){ $("button").click(function(e){ $("...
e.preventdefault()方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。...
weixin_30662011的博客
10-18 1223
语法：event.preventDefault()参数：event 必需 规定阻止哪个事件的默认动作。这个event参数来自事件绑定函数。例：a上面的url将不被打开 $("a").click(function(event){ event.preventDefault(); }); 转载于:https://www.cnblogs.com/chenxiaomei0104/p/9811...
e.preventdefault实例说明
ddxkjddx的专栏
06-17 2385
下面是自己的实例， $("#delAgent").click(function(e){ e.preventDefault(); var con = window.confirm("您确定要删除么?"); if(con) { window.location.href="agentDel.do?aid=<%= agentId%>"; } }); 在删除的链接中这样写：
e.preventDefault()是什么
weixin_42610010的博客
12-31 2300
e.preventDefault() 是一个 JavaScript 函数，它可以阻止浏览器的默认行为。例如，当你点击一个超链接时，浏览器会自动跳转到超链接指向的页面，这就是浏览器的默认行为。如果你希望在点击超链接时不跳转，可以在超链接的事件处理函数中使用 e.preventDefault() 来阻止浏览器的默认行为。 例如，假设你有一个超链接： <a href="/some/page"&gt...
事件对象之方法e.preventDefault()
xuehaocyuyan的博客
08-14 733
事件对象3e: e.preventDefault():阻止某些事 ——表单、鼠标滚轮 鼠标滚轮事件：onmousewheel: e.deltaY 小例子：鼠标在盒子内部滚动时页面不滚动 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
e.preventdefault()别滥用
seeseeyoua的博客
05-11 781
有的时候我们会为事件回调函数添加一个参数（通常是e），并在函数中加入e.preventdefault()；以取消默认行为。由于习惯，我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同，在IE8上出现了一个bug：change事件能进入，但是UI显示上不能讲复选框的选中状态重绘。 分析原因，是我的e.preventdefault()阻止了状态重绘。去掉后，就好了。 e.preventdefault()会阻止什么： checkbox 、radio的状态变化(并非所有浏览器)。 a
关于e.preventDefault()方法
weixin_43821171的博客
09-22 7819
背景： 同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。 问题： 为什么我在父组件上使用pr
e.preventDefault()阻止默认行为
最新发布
czlj1998的博客
09-25 1126
因此，通过在输入框的onKeyUp事件中检查keyCode是否为13（回车键的keyCode为13），如果是，则使用preventDefault()方法阻止默认行为，即阻止表单提交。例如，你可以在按下回车键时阻止表单的默认提交行为，或者在按下空格键时阻止滚动页面的默认行为。，可以阻止链接的默认跳转行为，从而允许你在点击链接时执行自定义操作，比如打开一个模态框或执行一些其他逻辑。按钮点击：在处理按钮点击事件时，有时你可能希望阻止按钮的默认提交行为或页面刷新行为。表单提交：在处理表单提交事件时，通过调用。
js中的preventDefault
liu510817387的专栏
09-25 5700
preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。 JS阻止链接跳转 function stopDefault(e) { if (e && e.preventDefault) {//如果是FF下执行这个 e.preventDefault(); }else{ window.event.returnVa
e.preventDefault()和e.stopPropagation()以及return false的作用和区别
go
10-11 467
https://www.cnblogs.com/sqh17/p/8427283.html
Vue事件修饰符.prevent .passive
qg2276879379的博客
07-22 215
作用: prevent 是拦截默认事件，passive是不拦截默认事件。 prevent: 有些标签拥有自身的默认事件，比如a标签的跳转它会在冒泡结束后会开始执行默认事件。 注意:默认事件虽然是冒泡后开始，但不会因为stop阻止事件传递而停止。 passive这个修饰符会执行默认方法。 也许你们很好奇，明明默认执行为什么会设置这样一个修饰符。那是因为 浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认
passive
weixin_34232617的博客
04-17 179
2019独角兽企业重金招聘Python工程师标准>>> ...
e.preventDefault()与return false的区别
weixin_43852569的博客
08-16 437
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
VUE的事件修饰符，once,prevent,stop，capture,self,passive
wguix的博客
06-05 352
1.once，只执行一次 <div v-on:click.once='alert("1")'></div> 只有在第一次点击时会执行，再次点击不会起作用  2. prevent  阻止默认程序，比如form表单中的summit提交按钮，会自己提交，   <form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">&nbs
禁止触摸屏触控板手指缩放，需要这样处理
jimojianghu的专栏
12-31 3312
要禁止触控板的缩放行为，需要处理鼠标滚轮事件：wheel。要禁止触摸屏的手指缩放，可以使用如下的CSS和JS两种方法。
vue滚动条禁止_js禁止和开启滚动条事件
weixin_39863155的博客
01-30 1365
开发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看js实现整个页面禁止滚动：document.body.addEventListener('touchmove',function(e){e.preventDefault();},{passive:false});passive是干吗用的呢，设置该属性的目的主要是为了在阻止事件默认行...
EasyPlayer-lib.min.js:1 Unable to preventDefault inside passive event listener invocation.
05-24
这个错误信息通常与移动端的滑动操作有关，由于性能优化，现代浏览器默认会将一些事件处理程序设置为被动模式，以提高滚动性能。在被动模式下，无法使用preventDefault()方法来阻止默认行为，因为这可能会导致滚动卡顿。 要解决这个问题，你可以尝试使用addEventListener()方法来注册事件处理程序时，将第三个参数设置为{passive:false}，这会显式地告诉浏览器，事件处理程序需要阻止默认行为。例如： ``` element.addEventListener('touchstart', onTouchStart, {passive: false}); ``` 如果你使用的是第三方库或框架，可能需要查看其文档以了解如何处理passive事件监听器的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值