[英]How to use event.stopPropagation() JavaScript
I have three elements with events assigned to them. 我为事件分配了三个元素。 How should I use
event.stopPropagation
so only events for elements #1 and #2 are executed, but not for #3? 我应该如何使用
event.stopPropagation
以便仅执行元素#1和#2的事件,而不执行元素#3的事件? I put event.stopPropagation
in element #2 as it stops bubbling. 我将
event.stopPropagation
放在元素2中,因为它停止冒泡。 In my understanding, it should stop the triggering of the event in #3 but it doesn't seem to be working, all events are still being executed. 以我的理解,它应该停止触发#3中的事件,但是它似乎不起作用,所有事件仍在执行。 Here is JS code:
这是JS代码:
document.addEventListener("DOMContentLoaded", function() { document.querySelector('#element1').addEventListener('click', function(e) { console.log('Event in #element1 fired!'); }); document.querySelector('#element2').addEventListener('click', function(e) { event.stopPropagation(); console.log('Event in #element2 fired!'); }); document.querySelector('#element3').addEventListener('click', function(e) { console.log('Event in #element3 fired!'); }); });
<div id="element3" class="element"> Element 3 <div id="element2" class="element"> Element 2 <div id="element1" class="element"> Element 1 </div> </div> </div>
This line is wrong: 这行是错误的:
event.stopPropagation();
because the parameter with the event object passed to the function is named e
. 因为带有传递给函数的事件对象的参数名为
e
。
You need to write this as: 您需要这样写:
e.stopPropagation();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.