父元素與子元素的冒泡事件

最新推荐文章于 2022-11-14 16:16:47 发布
最新推荐文章于 2022-11-14 16:16:47 发布
阅读量1.1k 收藏
点赞数
文章标签： function javascript ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gj369326973/article/details/6740863
版权 
<script language="javascript" type="text/javascript">
function propagation(){
	alert(1);
}
function propagation_a(event){
	alert(2);
}
</script>
<body>
<ul>
	<li οnclick="propagation()"><a href="#" οnclick="propagation_a(event)">冒泡事件</a></li>
</ul>
</body>

當父級li點擊觸發propagation方法，子元素也會繼承此方法。




有些時候並不需要此行為，在火狐（等非IE瀏覽器中）加入阻止冒泡事件。


function propagation_a(event){
    event.stopPropagation();
    alert(2);
}

執行完propagation_a方法後結束


gj369326973
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 防止父元素事件冒泡触发
baidu_36415076的博客
11-16 1064
解决办法：event.stopPropagation(); 加重子节点的触发事件权重。<div onclick="showFather();" style="width: 100px;height: 100px;background: red"> <span onclick="showSon();" style="width: 50px;height: 50px;background: #
阻止向父级元素冒泡
qq_38233172的博客
05-02 406
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止向父级元素冒泡</title> <style> #box1 { width: 300px; height: 300px; ...
微信小程序 - 解决向父元素冒泡
m0_46364033的博客
11-30 905
小程序中总是有卡片，点击卡片会跳转页面，但是卡片中会有删除、编辑、付款等各种功能的按钮，是不需要跳转或是不同的跳转，举例：点“删除”按钮的时候我们应该是只要获取到一个id，那么如何让它父元素的跳转不要触发呢？很简单的一个解决方式：将bindtap换成catchtap 就可以啦。 bindtap和catchtap 共同点：都是点击事件函数，绑定到组件上，点击进行触发，和vue中@click差不多道理； 不同点：bindtap是冒泡事件，点击组件事件时，会向上传递，从而会引发父元素的点击事件；而catchtap
Jquery 阻止冒泡事件（阻止父元素事件触发）
小白一个
04-12 1902
如下：有一个div，div中有一个span： <div class="c2"> <span class="c1">Hello world</span> </div> div和span各有一个class，并且各自有对应的点击方法： <script type="text/javascript"> $(function(){...
根据子元素获取父元素在获取其中的子元素的值
jdihf的博客
11-08 711
$(this).parent().children(‘input’).val(); jquery里$(this)是获取当前元素 原生方式获取用 this $(this).parent()获取第一个父元素 $(this).parents() 获取所有父元素 .children(‘input’)获取元素为input的子元素 根据加减按钮获取到div父元素在再获取input蒜素的值 动态的修改 ...
阻止子元素继承父元素事件具体思路及实现
09-05
想要阻止点击#p_cont区域时触发a事件，需要在#p_cont区域内加入阻止事件冒泡的代码，具体实现祥看本文，希望对你有所帮助
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
10-15
在Vue框架中，事件冒泡是一种常见的事件处理机制，它允许事件从子元素向父元素逐级传播。在本文中，我们将探讨一个特定的问题，即在Chrome 44浏览器中，Vue应用中偶尔出现的子元素点击事件无法冒泡到父元素的问题，...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
这意味着如果你同时在父元素和子元素上设置了相同类型的事件处理函数，当子元素的事件被触发时，首先执行的是子元素的函数，然后才是父元素的函数。例如，在提供的代码示例中，当点击id3元素时，事件首先在捕获阶段...
JavaScript事件冒泡与事件捕获实例分析
10-18
事件冒泡允许事件从子元素向上传播到父元素，而事件捕获则相反，从最外层的document向下到具体的元素。合理利用这两种机制，配合事件委托和阻止默认行为，可以有效地管理页面的交互逻辑。在实际开发中，根据需求选择...
阻止子元素的事件冒泡到父元素
houshufen
12-26 1106
在项目中我们常常遇到这样一个问题：就是一个父元素里面有很多子元素，父元素和子元素都会有点击事件，当我们点击子元素的时候，不希望触发父元素的点击事件。 案例：购物车列表，想要点击增加或减少按钮时不希望触发父元素的点击事件进入详情页。 在子元素的点击事件中加入： //阻止click事件冒泡到父元素 event.stopPropagation(); 这样问题就解决啦。 ...
子元素组织事件冒泡
weixin_33882452的博客
06-29 131
//向上/向下 $('.dood-group-wrap').on('click', '.dood-select', function(event) {　　　　 　　........... 　　event.stopPropagation(); });  
事件之冒泡,监听与委托
Ma10110517的博客
04-01 342
事件冒泡或捕获 概念 当给子元素和父元素定义了相同的事件，比如都定义了onclick事件，点击子元素时，父元素的onclick事件也会被触发。js里称这种事件连续发生的机制为事件冒泡或者事件捕获。 事件冒泡或事件捕获都有传播的特征 阻止事件传播的方法： 在W3C中使用 Event.stopPropagation();`在这里插入代码片` 在IE中使用 Event.cancelBubble=true; 事件监听 事件监听可以改变事件机制，可以实现冒泡或者捕获 2.可以给同一个元素绑定多个相同的事件.
JS事件冒泡和事件代理（委托）
有问题可关注公众号：前端研究院 后台输入问题回复
10-11 490
事件冒泡 当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到window <!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事件冒泡详解和使用场景
Youyzq的博客
11-14 2308
事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件。
处理冒泡的两种方式
qian_an_hua_li的博客
08-02 520
在js中，子级可能通过冒泡影响父级 <div id="div1"> <div id="div2"></div> </div> ..... JS代码 window.onload=function(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ document.title+="1"; } di
事件冒泡 与 事件委托
qq_58340302的博客
03-01 708
事件冒泡 指对一个子元素触发某种事件，如果这个元素绑定了事件，就会触发该事件，如果没有绑定事件，则会向它的父级元素传播，去触发父级元素绑定的事件。 事件委托（事件代理） 因为子节点触发的事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，所以可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。 例如：假设 ul 里包括多个 li ，如果想对每一个 li 都绑定一样的事件，那我们直接给每个 li 都绑定事件，就太麻烦了。这时就可以用事件委托的方式，将
介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数
php_martin的博客
08-05 885
介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数
冒泡与捕获
WYF857446152的博客
05-25 5389
冒泡事件与捕获事件，以及阻止冒泡事件 阻止默认
阻止冒泡事件即子元素父元素间的事件继承或传递
u598975767的专栏
12-01 2268
#1包括#2,当点击#1区域任何位置时（包括#2），都会触发a事件。想要阻止点击#2区域时触发a事件，需要在#2区域内加入阻止事件冒泡的代码。 变成         其中javascript代码为(以下代码没有区别中英文字符，不能直接复制)： function a（）{ //这里是a事件的代码} function stopBubble(e) {  
怎么让父元素和子元素的点击事件同时生效
最新发布
07-17
要实现父元素和子元素的点击事件同时生效，您可以使用事件冒泡和事件捕获机制来处理。 事件冒泡是指事件从最具体的元素开始触发，然后逐级向上冒泡到父元素，直至根元素。而事件捕获则是相反的过程，事件从根元素开始触发，然后逐级向下捕获至最具体的元素。 默认情况下，事件会按照事件冒泡方式进行处理。因此，当您在子元素上触发点击事件时，该事件将首先在子元素上触发，然后冒泡到父元素，最后到达根元素。 您可以通过在父元素上添加事件处理程序来同时处理父元素和子元素的点击事件。以下是一个示例： HTML： ```html <div id="parent"> <div id="child"></div> </div> ``` JavaScript： ```javascript document.getElementById('parent').addEventListener('click', function () { console.log('父元素被点击'); }); document.getElementById('child').addEventListener('click', function (event) { event.stopPropagation(); // 阻止事件冒泡 console.log('子元素被点击'); }); ``` 在上述代码中，我们分别给父元素和子元素添加了点击事件处理程序。在子元素的点击事件处理程序中，我们使用了 `event.stopPropagation()` 方法来阻止事件冒泡，从而避免父元素触发相同的点击事件。 这样一来，当您在子元素上点击时，子元素的点击事件会被触发，并阻止事件冒泡至父元素。同时，父元素的点击事件也会触发。 希望以上信息对您有所帮助！如果您有任何其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值