gpt4 book ai didi

jQuery 事件捕获停止传播

转载 作者:行者123 更新时间:2023-12-01 08:37:04 25 4
gpt4 key购买 nike

我在父 div 上有一个事件监听器,并且我希望它也不会在子 div onclick 上被触发。

我为此使用了 jQuery,因为我需要 .on() 作为动态创建的元素,并且子 div 也是使用内联 onclick="myFunction()"动态创建的。当 onclick myFunction 发生在子级中时,我不希望再次调用父级 .on(click) 。

html:

    <div id="parent" class="areatext" onkeydown="checkR()">
<div id="input" contenteditable="true" style="min-height:26px;" onkeyup="checkTyping()"></div>
<div id="child" onclick="myFunction()"></div>
</div>

js文件1:

$('#parent').on('click', function(event){
$('#input').focus();
console.log('parent clicked!');
event.stopPropagation();
});

js文件2:

function myFunction(event){
// actions
// when this is clicked, #parent .on(click) also triggers, i don't want that
}

最佳答案

正如你所说,jQuery 不支持在捕获阶段监听事件;为了实现这一点,您必须使用标准 Javascript 而不是 jQuery。例如:

const parent = document.querySelector('#parent');
parent.addEventListener('click', (e) => {
if (e.target.matches('#child')) return;
e.stopPropagation();
console.log('parent was clicked, but not on child');
}, true);
function myFunction(event){
console.log('child was clicked on');
// when this is clicked, #parent .on(click) also triggers, i don't want that
}
<div id="parent" class="areatext">
parent
<div id="input" contenteditable="true" style="min-height:26px;" onkeyup="checkTyping()"></div>
<div id="child" onclick="myFunction()">child</div>
</div>

关于jQuery 事件捕获停止传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52352167/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com