event.stopPropagation()

最新推荐文章于 2023-11-25 01:54:38 发布
原创 最新推荐文章于 2023-11-25 01:54:38 发布 · 582 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#event.stopPropagatio

本文详细介绍了如何使用event.stopPropagation()来阻止事件的冒泡行为，并通过一个具体的HTML结构示例解释了这一过程。当为不同层级的元素添加点击事件监听器时，如何确保特定元素的事件不会触发其父级或其他祖先元素的事件。

阻止事件流：

event.stopPropagation();只考虑冒泡事件，这样才有意义，如果添加给捕捉行事件的话，事件的监听就没有意义了，

比如给:

<div>
    <p>
        <span></span>
    </p>
</div>

里的span添加onlick事件时，同时加上了event.stopPropagation();然后给div,p也添加了onlick的监听，那么当在页面上点击span元素区域时，就不会执行span的function（）{}内容，而是由于捕捉事件从最外层向内捕捉，仅仅执行了最外层的div的监听事件，而后就被阻止了，span的监听就无效了。



uniapp - 解决报错Error in von handler:“ TypeError: $event.stopPropagation is not a function“，阻止点击事件冒泡导致错
高级前端工程师
07-15 3401
uni-app，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，报错，冒泡，点击穿透，阻止点击事件冒泡，[Vue warnl: Error in von handler:" TypeError: $event.stopPropagation is not a function"，阻止失败，无法解决这个问题，外侧套一层还是报错，依旧出错，详细解决方案，如何解决这个问题，@click.stop，点击组件时不向下传递点击事件，只触发自身的点击事件，
JavaScript中的`event.preventDefault()`和`event.stopPropagation()`有什么区别？
Good_tea_h的博客
08-29 1569
作用阻止事件的默认行为阻止事件冒泡到父元素使用场景- 阻止表单提交- 阻止链接跳转- 阻止其他元素的默认行为- 避免不必要的事件处理- 控制事件传播路径影响范围只影响当前事件的默认行为只影响当前事件的冒泡过程是否阻止默认行为是否是否阻止事件冒泡否是是否需要额外调用若需阻止冒泡，则需额外调用若需阻止默认行为，则需额外调用。
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...
weixin_33774615的博客
11-11 1988
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，...
event stopPropagation()
qq 117791303
12-31 369
event.stopPropagation(); 它在这里的作用就是，父窗口DivMain和子窗口DivDrag都有单击事件的时候， 如果子窗口单击事情不添加阻止冒泡的话，当自己的逻辑执行完就会继续执行父窗口单击事件。 也就是 执行完 clickDiv 事件，他会执行 clickDivMain 方法。 可是我这里是想获取子窗口的坐标和宽度，如果不阻止，他就会获取父窗口的坐标和宽度了。 ...
e.stopPropagation()
a785589446的博客
04-01 2146
1. 定义和用法 不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 2. 语法 event.stopPropagation() 3. 说明 　　该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个...
关于event.cancelBubble和event.stopPropagation()的区别介绍
09-05
在JavaScript的事件处理中，`event.cancelBubble` 和 `event.stopPropagation()` 都是用来控制事件冒泡的行为，但它们之间存在一些关键的区别。事件冒泡是指事件从最深的节点开始，逐级向上层节点传播事件的过程。...
Jquery阻止事件冒泡 event.stopPropagation
10-28
标题中的"Jquery阻止事件冒泡 event.stopPropagation"就涉及到如何在jQuery中避免事件冒泡到DOM树的上级元素。`event.stopPropagation()`是jQuery提供的一个方法，用于阻止事件继续在DOM树中向上冒泡。当你调用这个...
event.stopPropagation()，阻止冒泡事件
qq_39822451的博客
09-24 698
{header:'${text("说明xxxx")}', name:'name1', editable:true, edittype:'textarea','onkeydown':'stopPropagation(event)' editoptions:{'maxlength':'255', 'class':'form-control', 'rows':'2'}}, function sto...
深入理解EventTarget中的属性event.stopPropagation()
zhengsr12345的博客
11-25 625
可以看到，事件捕获（设置capture属性为true）先于事件冒泡（capture默认是false）。很多人粗略地认为该属性只是阻止冒泡，实际上，正如其英文含义，它只是用来阻止事件传播，不管是事件冒泡阶段还是事件捕获阶段都可阻止进一步传播。综上，我们可得出结论，event.stopPropagation()既可阻止事件冒泡也可阻止事件捕获。我们会发现事件捕获在out这个div处就被截断，并且同时截断了事件冒泡的整个阶段。可以看到事件冒泡在in这个div处被截断，而事件捕获阶段不变。再次点击in这个div，
event.stopPropagation()和event.preventDefault()
zxw162的博客
04-28 1095
一、event.stopPropagation();阻止冒泡事件$(document).ready(function(){ $("span").click(function(event){ event.stopPropagation(); alert("The span element was clicked."); }); $("p").click(function(...
JS：event.stopPropagation(); 阻止冒泡的注意点
tiandaochouqin_1的博客
04-09 1728
① 不能阻止父级的父级，只能阻止父级 ②oncclick的c是小写 ③onclick="stopPropagation()" 以及 functionstopPropagation() 的括号里有无 event 不影响。 示例代码： <div class="col-md-3" onclick="into()"> <d...
取消冒泡 event.stopPropagation()
koukou0419的博客
05-10 773
//点击事件，就算子元素没绑定点击事件，父元素有绑定，当点击子元素的时候，也同样会出现冒泡事件， //取消冒泡事件 //事件对象，每个事件处理函数里面可让系统传一个事件对象给该函数,事件对象上有个方法取消冒泡函数event.stopPropagation(); div.onclick=function(e){ //e.stopPropagation(); //e.cancelB...
jquery的冒泡事件event.stopPropagation()
pingguonjb的专栏
07-07 960
jquery的冒泡事件event.stopPropagation() (2011-08-27 09:12:20)   分类： JS与网页特效 js中的冒泡事件与事件监听 冒泡事件 js中“冒泡事件”并不是能实际使用的花哨技巧，它是一种对js事件执行顺序的机制，“冒泡算法”在编程里是一个经典问题，冒泡算法里面的冒泡应该说是交换更加准确；j
关于js中事件的event.stopPropagation()方法的理解与举例说明
热门推荐
zhizhan888的博客
12-22 1万+
这里有你想要的JavaScript事件的触发原理，stopPropagation()方法的使用，欢迎大家来讨论，一起相互学习，一起进步
jQuery Event.stopPropagation() 函数详解
Gavid0124的专栏
04-13 1030
stopPropagation()函数用于阻止当前事件在DOM树上冒泡。 根据DOM事件流机制，在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上，如果这些祖辈元素上也绑定了相应的事件处理函数，就会触发执行这些函数。 使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。 该函数只阻止事件
阻止事件冒泡(event.stopPropagation())/阻止默认事件(event.preventDefault())
HELLO WORLD
10-05 3414
event.stopPropagation() stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。 function stopEvent(e) { e.stopPropagation(); } el.addEventListener('click', stopEvent, false); 上...
event.stopPropagation(); 阻止事件冒泡
幸福有多远
04-16 2197
html —&gt;head ———&gt;body —————–&gt;div ————————&gt;inputinput和div都有点击事件，由于事件冒泡作用，input框被点击触发事件之后，div的点击事件也要被触发。 有的时候根据需要不要进行事件冒泡，需要对其进行阻止① return false; 容易与“浏览器默认动作阻止“混淆 ② event.stopPropagation(); 阻...
event.stopPropagation();
最新发布
07-24
在 JavaScript 的事件处理中，`event.stopPropagation()` 是一个非常重要的方法，用于控制事件在 DOM 树中的传播行为。当某个事件（如点击、鼠标悬停等）被触发时，它会按照 DOM 树的结构在元素之间传播，通常包括两个阶段：捕获阶段（从最外层到目标元素）和冒泡阶段（从目标元素回到最外层）[^1]。 ### 作用 `event.stopPropagation()` 的作用是阻止事件继续在 DOM 树中传播，无论是捕获阶段还是冒泡阶段。这在某些情况下非常有用，例如： - 防止父元素的事件处理程序在子元素事件触发时被调用。 - 避免多个事件监听器的意外触发，尤其是在事件委托的场景中。 - 实现特定的交互逻辑，如阻止事件冒泡到全局监听器。 需要注意的是，`event.stopPropagation()` 不会阻止同一元素上其他事件监听器的执行。如果需要阻止同一元素上其他监听器的触发，则应使用 `event.stopImmediatePropagation()`。 ### 使用方式 `event.stopPropagation()` 通常在事件处理函数内部调用： ```javascript element.addEventListener('click', function(event) { event.stopPropagation(); // 其他逻辑处理 }); ``` ### 示例 以下是一个简单的示例，展示了 `event.stopPropagation()` 的实际应用： ```html <div id="parent"> <button id="child">Click me</button> </div> <script> document.getElementById('child').addEventListener('click', function(event) { event.stopPropagation(); console.log('Child button clicked'); }); document.getElementById('parent').addEventListener('click', function() { console.log('Parent div clicked'); }); </script> ``` 在这个例子中，当点击按钮时，只会触发子元素的事件处理程序，父元素的事件监听器不会被调用，因为事件传播被 `event.stopPropagation()` 阻止了。 ### 注意事项 - `event.stopPropagation()` 不会影响默认的浏览器行为（如点击链接跳转、表单提交等），如需阻止默认行为，应使用 `event.preventDefault()`。 - 在事件委托中使用 `event.stopPropagation()` 时需谨慎，避免影响其他需要冒泡的交互逻辑。 - 不建议过度使用 `event.stopPropagation()`，因为它可能使调试和维护变得更加困难。 ### 相关问题 1. 如何在 JavaScript 中使用 `event.preventDefault()` 和 `event.stopPropagation()` 的区别？ 2. 什么是事件委托，它在 JavaScript 中的应用场景是什么？ 3. `event.stopImmediatePropagation()` 与 `event.stopPropagation()` 之间有什么区别？ 4. 在事件冒泡过程中，如何判断事件是否已经被 `stopPropagation()` 阻止？ 5. 使用 `event.stopPropagation()` 是否会影响性能或调试？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值