JS 取消冒泡

最新推荐文章于 2023-01-15 13:25:45 发布
最新推荐文章于 2023-01-15 13:25:45 发布
阅读量487 收藏
点赞数
分类专栏： 前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch_lu/article/details/105565322
版权

解决问题：子标签和父标签有相同的事件A时，子标签使用取消冒泡，以阻止父标签的事件A触发。

<script type="text/javascript">
    function f1(e){
        alert("ClickMe1");
        e.cancelBubble = true;//取消冒泡
    }
    function f2(e){
        alert("ClickMe2");
    }
     </script>
    </head>
    <body style="font-size:30px;">
        <div οnclick="f2(event);">
            <span>ClickMe2</span>
            <div οnclick="f1(event);">ClickMe1</div>
　　　　 </div>
    </body>

AdaC772
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阻止冒泡事件 2020/11/24
weixin_50286102的博客
11-24 202
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
JavaScript事件冒泡与取消事件冒泡代码演示
最新发布
04-16
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。...关键词：事件冒泡、取消冒泡、单击事件。用途：学习如何使用JavaScript取消HTML事件的冒泡。
js 取消冒泡事件
awe5566的专栏
09-24 917
function stopBubble(e){   //一般用在鼠标或键盘事件上   if(e && e.stopPropagation){   //W3C取消冒泡事件   e.stopPropagation();   }else{   //IE取消冒泡事件   window.event.cancelBubble = true;   }   };   1、cancelBu
jquery取消事件冒泡的三种方法
热门推荐
typ0520的专栏
04-11 3万+
1、通过返回false来取消默认的行为并阻止事件起泡。 jQuery 代码: $("form").bind( 　　"submit", 　　function() { 　　　　return false; 　　 } ); 2、通过使用 preventDefault() 方法只取消默认的行为。 jQuery 代码: $("form").bind(
js取消冒泡
weixin_45672607的博客
01-15 449
js取消冒泡
JS - 取消事件冒泡
BarryLee的博客
02-09 2847
JavaScript的事件冒泡确实很有用（大多数情况下），但是有时确实不想它冒泡，那么可以通过以下方式取消 元素.事件 = function( event ) { // 解决兼容问题 event = event || window.event; // 将cancenBubble属性设置为false即可 event.cancelBubble = true; } ...
js如何取消事件冒泡
10-26
在JavaScript中，事件...总的来说，理解并掌握事件冒泡以及如何取消它对于编写高性能、可维护的JavaScript代码至关重要。在处理复杂的交互逻辑时，合理地利用这些方法能帮助我们更好地控制事件的流程，提高用户体验。
JS冒泡事件与事件捕获实例详解
11-26
本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下： 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> [removed] [removed] = function(){ ...
jquery取消事件冒泡的三种方法(推荐)
10-22
jQuery提供了几种简单有效的方法来取消事件冒泡，这些方法能够帮助开发者更好地控制事件的传播行为。 1. 使用`return false`取消默认行为并阻止冒泡 在jQuery事件处理函数中直接返回`false`是一种最简单的方式来...
浅谈javascript事件取消和阻止冒泡
10-24
总结来说，JavaScript的事件取消和阻止冒泡是控制页面交互行为的关键工具。通过使用`event.preventDefault()`、`event.stopPropagation()`以及IE特有的方法，我们可以精细地管理事件的行为，确保它们按照我们的预期...
取消冒泡
weixin_30556161的博客
09-11 143
w3c取消冒泡 e.stopPropagation(); IE取消冒泡 e.cancelBubble(); 实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>取消冒泡</title> &lt...
取消冒泡事件
weixin_34349320的博客
01-08 99
   这也时从别人那COPY来的。只不过是代码自己打了一次。原文    在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。   &lt;html&gt; &lt;head&gt; ...
js关闭冒泡的方法
enthan809882的博客
11-26 255
function doSomething(e) { if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); }
JS 取消冒泡和阻止默认事件
qq_45560350的博客
08-27 1219
事件对象 每个事件处理函数中，都可以有一个形参，系统会自动传递一个事件对象到函数中，这个对象的每个属性都代表事件被触发时的一些关键性数据 div.onclick = function(e){//形参e就是系统传递的事件对象 console.log(e); } 取消冒泡 1 .W3C标准 event.stopPropagation();但不支持IE9以下版本 document.onclick = function(){ console.log('aha'); } div.onclick = fun
Js实现登录页面login遮罩层
@贵阳可达鸭
07-03 730
<!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-...
JS取消冒泡（兼容模式）
丶扁扁的糖是扁的 的博客
01-07 796
用于取消各种冒泡事件，如下面的点击事件冒泡： <button @click="cancelBubbling">按钮</button> function cancelBubbling(e) { if (!!e?.stopPropagation) { e.stopPropagation(); //有stopPropagation属性的直接掉用 } else { window.event.cancelBubble = true; //没有stopPropag
js 如何取消冒泡
m0_52946104的博客
09-20 375
答，因为在多个点击事件相互覆盖执行的时候，会连续触发点击事件。
javascript当中冒泡取消的用法
qq_43650923的博客
10-30 225
例 9.3（bubble2CancelIEFF.html） 冒泡取消。event.cancelBubble <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript">...
理解JavaScript中的事件冒泡与阻止冒泡
本文主要探讨了JavaScript中的冒泡事件，通过一个具体的div弹窗事件示例，解释了事件冒泡的原理，并展示了如何通过`event.stopPropagation()`方法来阻止事件冒泡，以及`event.preventDefault()`方法防止默认行为的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值