[英]why preventdefault/stopPropagation not working in javascript?
I have a demo application where preventdefault/stopPropagation.Not sure where I am doing wrong.Using Jquery it is working fine.Follow the below steps to reproduce the bug我有一个演示应用程序,其中 preventdefault/stopPropagation。不确定我在哪里做错了。使用 Jquery 它工作正常。按照以下步骤重现错误
button
.运行应用程序并单击button
。 when I put jQuery code it works perfectly.当我输入 jQuery 代码时,它工作得很好。 it only show 'jquery:: 1'
on console not showing它只在控制台上显示'jquery:: 1'
而不显示
'jquery:: 2'
as expected because we used e.preventDefault();e.stopPropagation();
'jquery:: 2'
符合预期,因为我们使用e.preventDefault();e.stopPropagation();
jQuery(document).on('click', '.bclink[href*="bcid="]', function(e){
e.preventDefault();
e.stopPropagation();
console.log('jquery:: 1')
})
jQuery(document).on('click', '.clickvideo', function(e){
// detect .clickvideo-overlay parent to prevent spawning of additional w10 lightboxes
console.log('jquery:: 2')
});
but same code when I used in javascript and click button
it console both JS:::1
and JS:::2
.why prevent default not works但是当我在 javascript 中使用相同的代码并单击button
时,它同时控制台JS:::1
和JS:::2
。为什么防止默认值不起作用
document.addEventListener('click', function(e) {
// loop parent nodes from the target to the delegation node
function handler(e){
e.preventDefault();
e.stopPropagation();
console.log("JS:::1")
}
for (var target = e.target; target && target != this; target = target.parentNode) {
if (target.matches('.bclink[href*="bcid="]')) {
handler.call(target, e);
break;
}
}
}, false)
document.addEventListener('click', function(e) {
// loop parent nodes from the target to the delegation node
function handler(e){
e.preventDefault();
e.stopPropagation();
console.log("JS::: 2")
}
for (var target = e.target; target && target != this; target = target.parentNode) {
if (target.matches('.clickvideo')) {
handler.call(target, e);
break;
}
}
}, false)
})
here is my code https://jsbin.com/riwazorine/edit?html,css,js,output这是我的代码https://jsbin.com/riwazorine/edit?html,css,js,Z7148E6221F39893
Expected output: it only show "JS:::1"
as I used preventdefault and stopPropagation()预期 output:它只显示"JS:::1"
,因为我使用了 preventdefault 和 stopPropagation()
In the JS, both event listeners are attached to the same element - the document.在 JS 中,两个事件侦听器都附加到同一个元素 - 文档。 stopPropagation
only stops event propagation to other elements (ancestors or descendants), but not to the same elements. stopPropagation
仅停止事件传播到其他元素(祖先或后代),而不是相同元素。
You need stopImmediatePropagation
, which stops other event handlers on the same element from running.您需要stopImmediatePropagation
,它会阻止同一元素上的其他事件处理程序运行。
document.addEventListener('click', function(e) { // loop parent nodes from the target to the delegation node function handler(e) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); console.log("JS:::1") } for (var target = e.target; target && target;= this. target = target.parentNode) { if (target.matches('.bclink[href*="bcid="]')) { handler,call(target; e); break, } } }. false) document,addEventListener('click'. function(e) { // loop parent nodes from the target to the delegation node function handler(e) { e;preventDefault(). e;stopPropagation(). console:log("JS::. 2") } for (var target = e;target; target && target.= this. target = target.parentNode) { if (target.matches(',clickvideo')) { handler;call(target; e), break; } } }, false)
.bcthumbnail { width: 100px; height: 100px; border: 1px solid }
<div class="bcthumbnail clickvideo bcimgadded" data-bcid="6086922094001"><a href="?bcid=6086922094001" class="bclink" title="Autonomous Infrastructure: Larry Ellison at Oracle OpenWorld 2019"><button class="vjs-big-play-button"></button>button</a></div>
Also, rather than your for
loo, you can use .closest
instead, it's a whole lot cleaner.此外,您可以使用.closest
而不是你的for
loo,它更干净。
document.addEventListener('click', (e) => { if (e.target.closest('.bclink[href*="bcid="]')) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); console.log("JS:::1") } }) document.addEventListener('click', function(e) { if (e.target.closest('.clickvideo')) { console.log("JS::: 2") } })
.bcthumbnail { width: 100px; height: 100px; border: 1px solid }
<div class="bcthumbnail clickvideo bcimgadded" data-bcid="6086922094001"><a href="?bcid=6086922094001" class="bclink" title="Autonomous Infrastructure: Larry Ellison at Oracle OpenWorld 2019"><button class="vjs-big-play-button"></button>button</a></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.