取消事件冒泡（多个事件重复发生）

最新推荐文章于 2021-11-29 17:21:39 发布
原创 最新推荐文章于 2021-11-29 17:21:39 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#hierarchy #function #xhtml #standards #microsoft #internet

本文介绍了事件冒泡的概念及其实现方式，并提供了一个具体的HTML示例，展示了如何通过JavaScript阻止事件冒泡，这对于理解DOM事件处理至关重要。

 在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click 事 件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

 

 

 

在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble 方法，即可取消事件冒泡，见 下：

 

 

现在你可能想知道，什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和 鼠标）的时候，就有这个必要了。

 

 

英文参考：

 

cancelBubble Property


Sets or retrieves whether the current event should bubble up the hierarchy of event handlers.

Syntax

event
.cancelBubble
 [ =
 bCancel
 ]

Possible Values

bCancel Boolean that specifies or receives one of the following values.
false Default. Bubbling is enabled, allowing the next event handler in the hierarchy to receive the event.
true Bubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.

The property is read/write. The property has a default value of false .

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

Remarks

Using this property to cancel bubbling for an event does not affect subsequent events.

Example

This example cancels bubbling of the onclick e vent if it occurs in the img object when the user presses the SHIFT key. This prevents the event from bubbling up to the onclick event handler for the document.

 

 

Standards Information

There is no public standard that applies to this property.

郑某人
关注
DOM事件机制、事件流（事件冒泡、事件捕获）、事件委托、事件对象、事件类型（JavaScript）
qq_51066068的博客
04-18 1115
目录 事件机制 事件是由三部分组成 执行事件的步骤 常用事件： 1.事件流 1.1.事件冒泡(IE事件流) 阻止事件冒泡 event.stopPropagation() 1.2.事件捕获(Netscape事件流) 1.3.DOM事件流 2.事件处理程序 2.1.HTML 事件处理程序 2.2.DOM0 事件处理程序 2.3.DOM2 事件处理程序 addEventListener() removeEventListener() 3.事件对象 3.1...
JS基础-事件模型(事件&事件流&自定义事件&事件冒泡/代理)
LYFlied的博客
03-28 2811
事件与事件流 事件模型 DOM0级模型 IE事件模型 DOM2级模型 DOM3级事件处理方式 事件对象 事件绑定与解除 事件绑定 对象.on事件名字=事件处理函数 对象.addEventListener("没有on的事件名字",事件处理函数,false) 对象.attachEvent("有on的事件名字",事件处理函数); Event Wrapper 自定义事件 JQuery Event模型 JS事件模型-观察者模式 代码例子(通用事件绑定&事件冒泡&代理) 1. 通用事件绑定 2.事件冒泡 3.代理
js取消事件冒泡方法
NuClear的.Net专栏
09-22 1098
function stopBubble(e) {             //如果传入了对象，那么就是非IE浏览器，才用W3C标准方法             if (e || e.stopPropagation) {                 e.stopPropagation();             }             else {          
mouseover、mouseout停止事件冒泡的解决方案
南斗兄弟
08-27 5048
此文章来源：　寒云路几层的博客 link : http://vs.net2005.blog.163.com/blog/static/77528105200952310565624/mouseover、mouseout停止事件冒泡的解决方案2009-04-04　　在IE里有onmouseleave和onmouseenter，可以解决停止事件冒泡。然而，在其他兼容的各大浏览器中，却没有这两个事件。　　在各类浏览器中，都有onmouseover和onmouseout事件。但是，这两个事件却无法做到停止事件冒泡。　
如何解决点击一个点击事件 触发多个点击事件 冒泡事件
Acitylion的博客
01-05 2514
 工作日志 仅供参考   <div class="demo1> <div class=demo2>我的demo2</div> </div> //当demo2 和demo1 同时都绑定点击事件的时候 当你点击子元素demo2的时候会触发父元素demo1 的点击事件 说明发生了冒泡事件（冒泡事件自行去百度） 解决方法是 event.st...
解决点击事件冒泡
11-02
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
阻止冒泡事件 2020/11/24
weixin_50286102的博客
11-24 267
stopPropagation() 语法 event.stopPropagation(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
js事件冒泡与事件捕获详解
10-20
这种方式可以向同一个元素绑定多个事件处理函数，并且可以明确指定事件的传播方式是使用冒泡还是捕获： ```javascript element.addEventListener('click', handler, false); // 默认false，表示冒泡 element....
手动多个click事件防止多触发1
08-08
在JavaScript和jQuery编程中，有时候我们需要处理多个点击事件，但为了避免事件被多次触发，需要进行适当的控制。在给定的示例中，开发者通过引入一个`flag`属性来实现这一目标，这是一种常见的防止事件重复触发的...
深入理解事件冒泡、委托及jQuery节点操作与函数节流
然而，在某些场景下，事件冒泡可能导致意外的行为，例如多个嵌套元素同时响应点击事件，因此需要通过调用event.stopPropagation()方法来阻止事件继续向上冒泡。与此同时，还需注意区分“阻止默认行为”这一操作，如...
Vue · @click点击事件：阻止事件冒泡、取消默认事件
weixin_42091247的博客
11-29 3939
一般情况下绑定事件方法的： <div class="parent-wrapper" @click="clickWrapper">点这里</div> 阻止事件冒泡方法： <div class="parent-wrapper" @click.stop="clickWrapper">点这里</div> 取消默认事件方法： <div class="parent-wrapper" @click.prevent="clickWrapper">点这里<
事件冒泡的一些应用_利用事件冒泡处理多个事件[1]
weixin_30344995的博客
11-17 159
在做项目时，有这样一个需求，需要点击Input显示隐藏下拉面板，从中选择内容填充入文本框。 最开始思路： （1）文本框与下拉面板作为一个整体，整体失去焦点后，隐藏下拉面板，不可行； （2）文本框正拥有焦点，此时点击面板，尝试先触发面板的点击事件再通过文本框的失去焦点事件 以上思路最终均不可行，原因： （1）div没有获取焦点之说，何来失去焦点； （2）文本框触发焦点事件总是会先...
冒泡事件 的解除办法
qq_36657997的博客
07-04 1421
今天遇到一个问题，单击一个按钮时，触发了两次click事件。经过询问我的boss曹叔后得知，我遇到了冒泡事件。冒泡事件我的简单理解是当你触发一个click事件时，如果该子节点和父节点都绑定了，click事件，事件会向上传递，从子节点传递到父节点。子节点处理一次，父节点再处理一次，依次向上。我的按钮是button里面添加一个子节点i代码如下： var button = document.creat...
jQuery阻止冒泡事件（单击事件执行了两次或多次）
HaleyTiger的博客
10-14 607
event.stopPropagation() 方法：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播 一、第一种（亲测） $(“selector…”).stopPropagation(); 二、第二种（暂未测） （1）先解绑事件 $(“selector…”).unbind(); 注： 切记unbind()中不要写具体的事件名，不然无法解决冒泡事件。 （2）再重新绑定事件 ...
click点击一次触发多次，冒泡与阻止冒泡，event.stopPropagation()和event.preventDefault()，return false三种的区别
唐策的博客
01-26 9297
eg：click点击一次触发多次， 解决办法：在对on绑定事件前，先解除绑定 $(document).off("click","#div").on("click","#div", function(){ alert("Hello World"); }) 今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方
取消html中onclick的事件冒泡
weixin_30446613的博客
12-24 3309
阻止html中onclick事件冒泡，处理方法上多加事件一个参数，不需要传值。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>&lt...
前端冒泡事件，导致一次动作触发多次事件（例如click）
BluerCat的博客
11-03 952
背景：最近突然发现一个奇妙的东西，那就是你点击一次按钮，触发一次事件，第二次点击，触发两次，第三次点击，触发三次。。。。。。 最终想起来了，之前弄canvas画布的时候，搞鼠标监听，大佬和我说过冒泡事件，当时使用e.preventDefault()，禁用默认事件。 阻止冒泡事件的方法： 方法一：使用.off(‘click’) $('#signatureAgreeSignBtn').off('click').click(function() {}); 方法二：使用e.stopPropagation() $(
js 暂停执行 和重复执行
Make the world go
10-17 5735
  var  demo = setTimeout(function(){ },200);     暂停多少毫秒执行   clearTimeout (demo) 在时间以内 可以清除执行 还有一种执行方法，与暂停类似，setInterval()就是时间间隔表示在某段时间内不停的去执行一行代码，除了停止它否则会一直执行下去，这就是与setTimeout()不同之处，一个是暂停多少秒后执行一次，而...
阻止事件冒泡和默认事件的区别
最新发布
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()` - 两者可独立使用，也可根据需求组合使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值