取消冒泡和阻止默认事件

最新推荐文章于 2021-08-09 18:26:36 发布
原创 最新推荐文章于 2021-08-09 18:26:36 发布 · 206 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了如何在不同浏览器环境下取消冒泡事件（event.stopPropagation()与event.cancelBubble）以及阻止默认事件（return false, event.preventDefault(), event.returnValue=false）。重点讲解了这些方法在W3C标准与IE版本中的适用性。

1、取消(停止)冒泡

a) W3C标准 event.stopPropagation();但不支持 ie9以下版本
b) event.cancelBubble=true; ie8及ie8以下可用

2、阻止默认事件

默认事件——表单提交（当表单中只有一个input_text框时,回车即被提交），a标签跳转，右键菜单等

a) return false; 以对象属性的方式注册的事件才生效，用addEventListener/attachEvent这种是不生效的
b) event.preventDefault(); W3C标准，IE9以下不兼容
c) event.returnValue=false;兼容IE

js取消默认行为和阻止事件传播的方式
猿码互联
06-03 921
当一个元素上触发某个事件时，事件会从该元素开始沿着 DOM 树向上传播，直到到达根元素。通过阻止事件传播，可以阻止事件继续向上传播，即停止事件冒泡。默认情况下，当用户触发某些事件时（如点击链接、提交表单等），浏览器会执行默认的操作。通过取消默认行为，可以阻止浏览器执行这些默认操作。需要注意的是，还有一种方法可以同时取消默认行为和阻止事件传播，即调用。在上述示例中，当点击链接时，既取消了默认行为，也阻止了事件传播。在上述示例中，当点击内部元素时，事件处理函数会调用。在上述示例中，我们通过调用。
浅谈jQuery 中的事件冒泡和阻止默认行为
10-22
本文将详细探讨jQuery中的两个重要概念：事件冒泡和阻止默认行为。通过具体的代码示例和解释，本文将帮助您理解和掌握如何在使用jQuery进行前端开发时，更好地控制页面上的事件交互。 1. 事件冒泡的概念与应用 事件...
jquery取消事件冒泡的三种方法
热门推荐
typ0520的专栏
04-11 3万+
1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　 } ); 2、通过使用 preventDefault() 方法只取消默认的行为。 jQuery 代码: $("form").bind(
取消冒泡
weixin_30556161的博客
09-11 189
w3c取消冒泡 e.stopPropagation(); IE取消冒泡 e.cancelBubble(); 实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>取消冒泡</title> &lt...
取消冒泡事件
weixin_34349320的博客
01-08 145
   这也时从别人那COPY来的。只不过是代码自己打了一次。原文    在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。   &lt;html&gt; &lt;head&gt; ...
js 取消冒泡事件
awe5566的专栏
09-24 991
function stopBubble(e){   //一般用在鼠标或键盘事件上   if(e && e.stopPropagation){   //W3C取消冒泡事件   e.stopPropagation();   }else{   //IE取消冒泡事件   window.event.cancelBubble = true;   }   };   1、cancelBu
js阻止冒泡和默认事件（默认行为）详解
10-21
综上所述，JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点，它们在处理复杂的事件监听和避免不必要的事件触发时发挥着重要的作用。理解并掌握这些技术对于提升前端开发的交互体验与代码质量具有重要意义。
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
12-12
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e....
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
在阻止默认行为和事件冒泡的示例中，展示了`return false`可以同时阻止事件冒泡和取消默认行为。这在处理表单提交或链接点击时很有用，因为它可以防止页面跳转或者表单提交等默认操作。 综上所述，jQuery事件处理...
jQuery中事件的冒泡和默认行为
01-20
`，这不仅可以阻止事件冒泡，还能取消事件的默认行为。 2. **使用stopPropagation()**：如果事件回调函数接收到了`event`参数，可以通过调用`event.stopPropagation();`来阻止事件继续向上冒泡，但不会影响默认行为...
js基础---取消冒泡和阻止默认事件
weixin_44164982的博客
08-03 1243
1、取消冒泡 （1）冒泡解除 （2）封装一个stopBubble函数，阻止冒泡 2、阻止默认事件 （1）默认事件阻止 （2）封装阻止默认事件的函数 cancelHandler();
取消: . 冒泡>
丿乱丶的博客
04-23 261
创建DIV(嵌套): 我是大div 我是小div 格式编排: #mybigdiv { width: 300px; height: 300px; border: 1px solid red; } #myid { w
JS 取消冒泡
Ada的专栏
04-16 547
解决问题：子标签和父标签有相同的事件A时，子标签使用取消冒泡，以阻止父标签的事件A触发。 <script type="text/javascript"> function f1(e){ alert("ClickMe1"); e.cancelBubble = true;//取消冒泡 } function f2(e){ ...
【转】jquery-取消冒泡
weixin_30824277的博客
07-25 276
转自：http://blog.163.com/css_mm/blog/static/209182176201262665157634/ 1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　} ); 2、通过使用 pre...
jQuery --- 取消冒泡
weixin_36024620的博客
04-23 606
quxiaomaopao.html #mybigdiv { width: 300px; height: 300px; border: 1px solid red; } #myid { width: 100px; height: 1
JS中事件的冒泡与冒泡的取消
Fantasc的博客
08-09 2262
事件的冒泡：（Bubble） ​ 所谓的事件冒泡，就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。 注意：是相同的事件，而不是相同的响应函数内容，比如大家都绑定了onclick单击事件，叫做相同的事件。 以下是练习的小例子： 在以下代码中，span是div元素的子元素，而div是body的子元素，他们都绑定的是一样的事件，所以当span元素的响应函数被触发时，绑定了相同事件的的父元素以及祖先元素的响应函数也会被触发。 所谓的向上传递，指的是向当前元素的父元素或
JS 取消冒泡和阻止默认事件
qq_45560350的博客
08-27 1337
事件对象 每个事件处理函数中，都可以有一个形参，系统会自动传递一个事件对象到函数中，这个对象的每个属性都代表事件被触发时的一些关键性数据 div.onclick = function(e){//形参e就是系统传递的事件对象 console.log(e); } 取消冒泡 1 .W3C标准 event.stopPropagation();但不支持IE9以下版本 document.onclick = function(){ console.log('aha'); } div.onclick = fun
阻止事件冒泡和默认事件的区别
最新发布
03-29
<think>嗯，用户问的是阻止事件冒泡和阻止默认事件的区别。我需要先回忆一下这两个概念的具体含义，然后找出它们的区别和应用场景。 首先，事件冒泡是DOM中的事件传播机制，比如点击一个子元素，事件会向上级父元素逐层触发。阻止冒泡就是让事件不再继续上传，比如在子元素处理完事件后，不让父元素接收到这个事件。常用的是event.stopPropagation()方法。 然后是默认事件，指的是浏览器对某些元素的默认行为，比如点击链接会跳转，表单提交会刷新页面。阻止默认事件就是取消这些默认行为，使用event.preventDefault()方法。 需要区分两者的使用场景。比如，如果一个链接绑定了点击事件处理函数，但不想让点击后跳转，就要阻止默认事件。而如果同一个页面上有多个嵌套元素绑定点击事件，可能需要在某个子元素处理完后阻止冒泡，避免父元素的事件处理函数被触发。 可能用户在实际开发中遇到了事件重复触发或者默认行为干扰的问题，需要明确这两个方法的区别。要确保回答结构清晰，用例子说明，避免混淆。 还要注意使用中文，按照系统级指令正确使用LaTeX格式，但这里可能用不上数学表达式。重点在于逻辑清晰，步骤分明，帮助用户理解两者的区别和应用。</think>### 阻止事件冒泡和默认事件的区别 #### 1. **事件冒泡（Event Bubbling）** - **定义**：事件从触发它的最深层元素（目标元素）开始，逐层向上传播到父元素的过程。 - **阻止方法**：调用 `event.stopPropagation()`。 - **作用**：**仅阻止事件向父级传播**，不影响当前元素的事件处理逻辑或默认行为。 - **使用场景**： 例如，当子元素和父元素都绑定了点击事件时，若希望子元素触发后父元素不响应： ```javascript document.getElementById("child").addEventListener("click", function(event) { event.stopPropagation(); // 父元素不会收到此点击事件 console.log("子元素被点击"); }); ``` #### 2. **默认事件（Default Event）** - **定义**：浏览器对某些元素预设的行为（如点击链接跳转、表单提交刷新页面）。 - **阻止方法**：调用 `event.preventDefault()`。 - **作用**：**仅取消浏览器默认行为**，不阻止事件传播。 - **使用场景**： 例如，阻止表单自动提交或禁止链接跳转： ```javascript document.querySelector("a").addEventListener("click", function(event) { event.preventDefault(); // 阻止链接跳转，但事件仍会冒泡到父元素 console.log("链接点击被阻止"); }); ``` --- #### 3. **核心区别** | **特性** | 阻止事件冒泡 (`stopPropagation`) | 阻止默认事件 (`preventDefault`) | |-------------------|---------------------------------------|---------------------------------------| | **影响范围** | 阻止事件向上传播 | 取消浏览器默认行为 | | **事件是否执行** | 当前元素的事件仍会触发 | 当前元素的事件仍会触发 | | **典型用例** | 避免父级元素触发相同事件 | 阻止表单提交、链接跳转等 | --- #### 4. **联动使用示例** ```javascript document.querySelector("button").addEventListener("click", function(event) { event.preventDefault(); // 阻止表单提交（默认行为） event.stopPropagation(); // 阻止事件冒泡到父容器 console.log("按钮点击被处理"); }); ``` - **效果**： - 表单不会提交 - 父容器的点击事件不会被触发 --- #### 5. **总结** - 若需 **隔离事件传播**，用 `event.stopPropagation()` - 若需 **禁用浏览器默认行为**，用 `event.preventDefault()` - 两者可独立使用，也可根据需求组合使用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值