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

最新推荐文章于 2020-11-03 15:09:04 发布
最新推荐文章于 2020-11-03 15:09:04 发布
阅读量969 收藏
点赞数
文章标签： hierarchy function xhtml standards microsoft internet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengzhichen/article/details/4880412
版权

 在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，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.

郑某人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决点击事件冒泡
11-02
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
mouseover、mouseout停止事件冒泡的解决方案
南斗兄弟
08-27 4864
此文章来源：　寒云路几层的博客 link : http://vs.net2005.blog.163.com/blog/static/77528105200952310565624/mouseover、mouseout停止事件冒泡的解决方案2009-04-04　　在IE里有onmouseleave和onmouseenter，可以解决停止事件冒泡。然而，在其他兼容的各大浏览器中，却没有这两个事件。　　在各类浏览器中，都有onmouseover和onmouseout事件。但是，这两个事件却无法做到停止事件冒泡。　
如何解决点击一个点击事件 触发多个点击事件 冒泡事件
Acitylion的博客
01-05 2429
 工作日志 仅供参考   <div class="demo1> <div class=demo2>我的demo2</div> </div> //当demo2 和demo1 同时都绑定点击事件的时候 当你点击子元素demo2的时候会触发父元素demo1 的点击事件 说明发生了冒泡事件（冒泡事件自行去百度） 解决方法是 event.st...
事件冒泡的一些应用_利用事件冒泡处理多个事件[1]
weixin_30344995的博客
11-17 106
在做项目时，有这样一个需求，需要点击Input显示隐藏下拉面板，从中选择内容填充入文本框。 最开始思路： （1）文本框与下拉面板作为一个整体，整体失去焦点后，隐藏下拉面板，不可行； （2）文本框正拥有焦点，此时点击面板，尝试先触发面板的点击事件再通过文本框的失去焦点事件 以上思路最终均不可行，原因： （1）div没有获取焦点之说，何来失去焦点； （2）文本框触发焦点事件总是会先...
前端的事件冒泡（例如点击一次onclick事件执行两次）解决办法
weixin_34403693的博客
11-20 3272
问题概要： 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value，同时也绑定不上onclick等事件。举个例子： 可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on但是我还需要对他进行一些操作需要绑定他的onclick事件 ...
手动多个click事件防止多触发1
08-08
在JavaScript和jQuery编程中，有时候我们需要处理多个点击事件，但为了避免事件被多次触发，需要进行适当的控制。在给定的示例中，开发者通过引入一个`flag`属性来实现这一目标，这是一种常见的防止事件重复触发的...
动态的绑定事件addEventListener方法的使用
09-04
`addEventListener`是DOM（文档对象模型）级别2事件处理程序的一部分，它允许我们为一个元素添加一个或多个事件处理器。这个方法有两个参数：一个是事件类型（例如"click"、"mouseover"等），另一个是事件处理函数，...
jQuery中的常用事件总结
10-29
这些事件可以用`.bind()`或`.on()`方法绑定，并且可以链式调用来处理多个事件： ```javascript $('#myElement').on('mouseenter mouseleave', function(event) { // 处理鼠标进入和离开事件 }); ``` 总的来说，...
易语言-易语言冒泡排序并去重复
06-25
接着，对这个无重复的数组进行冒泡排序，实现完整的排序并去重复功能。 实际的冒泡排序部分会涉及更多的易语言语法，包括设置循环、条件判断和交换元素等操作。在排序过程中，可以使用临时变量存储当前比较的元素，...
事件监听及JS相关基础
05-31
- **bind()**: 这个方法用于将一个或多个事件处理器（事件监听器）绑定到目标元素。当指定的事件发生时，关联的函数会被调用。例如，`element.addEventListener('click', function() { ... })` 或 `$(element).on('...
[JS][技巧]利用事件冒泡特性处理多个按钮的单击事件
我是涛锅
10-29 2856
以前一直不在意这个事件冒泡，只是有时候会用到stopPropagation()去阻止事件冒泡，最近发现，利用好了事件冒泡这一特性，有些地方会非常方便。拿个最直观的例子来举例 ToolBar界面 HTML<div id="toolbar" class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group" r
js 暂停执行 和重复执行
Make the world go
10-17 5622
  var  demo = setTimeout(function(){ },200);     暂停多少毫秒执行   clearTimeout (demo) 在时间以内 可以清除执行 还有一种执行方法，与暂停类似，setInterval()就是时间间隔表示在某段时间内不停的去执行一行代码，除了停止它否则会一直执行下去，这就是与setTimeout()不同之处，一个是暂停多少秒后执行一次，而...
jQuery阻止冒泡事件（单击事件执行了两次或多次）
HaleyTiger的博客
10-14 521
event.stopPropagation() 方法：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播 一、第一种（亲测） $(“selector…”).stopPropagation(); 二、第二种（暂未测） （1）先解绑事件 $(“selector…”).unbind(); 注： 切记unbind()中不要写具体的事件名，不然无法解决冒泡事件。 （2）再重新绑定事件 ...
取消html中onclick的事件冒泡
weixin_30446613的博客
12-24 3223
阻止html中onclick事件冒泡，处理方法上多加事件一个参数，不需要传值。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>&lt...
js事件被多次触发时，如何做到只执行最后一次事件函数
weixin_33676492的博客
07-13 3152
昨天遇到一个问题：微信购物车页面的数量增减按钮点击过快时，input里的值会乱跳 　　看了源代码后发现，每次点击增减按钮后，整个购物车区域都通过ajax重新写入，而ajax写入是需要时间的，这就导致了点击过快时页面异步加载速度跟不上点击的速度，故此input里面的值会乱跳； 解决方案： 　　1、在点击事件外面申明一个变量 　　　　var iTime; 　　2、给ajax的触发事件添加时间...
前端冒泡事件，导致一次动作触发多次事件（例如click）
BluerCat的博客
11-03 830
背景：最近突然发现一个奇妙的东西，那就是你点击一次按钮，触发一次事件，第二次点击，触发两次，第三次点击，触发三次。。。。。。 最终想起来了，之前弄canvas画布的时候，搞鼠标监听，大佬和我说过冒泡事件，当时使用e.preventDefault()，禁用默认事件。 阻止冒泡事件的方法： 方法一：使用.off(‘click’) $('#signatureAgreeSignBtn').off('click').click(function() {}); 方法二：使用e.stopPropagation() $(
click点击一次触发多次，冒泡与阻止冒泡，event.stopPropagation()和event.preventDefault()，return false三种的区别
唐策的博客
01-26 8953
eg：click点击一次触发多次， 解决办法：在对on绑定事件前，先解除绑定 $(document).off("click","#div").on("click","#div", function(){ alert("Hello World"); }) 今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方
js事件冒泡，阻止事件冒泡
最新发布
05-11
JavaScript事件冒泡是指事件从最具体的元素开始，逐级向上传播到最不具体的元素。如果不阻止事件冒泡，事件会在元素层次结构中所有祖先元素中都被触发。可以使用`event.stopPropagation()`方法来阻止事件冒泡。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值