jQuery事件捕获停止传播
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery事件捕获停止传播相关的知识,希望对你有一定的参考价值。
我在父div上有一个事件监听器,我希望它也不会因为孩子div onclick而被解雇。
我正在使用jQuery,因为我需要.on()作为动态创建的元素,同时使用内联onclick =“myFunction()”动态创建子div。当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>
另一答案
如果您希望在单击子div时不调用父div的单击处理程序,则必须在子div的单击事件处理程序中添加event.stopPropagation()
。
根据你的代码:
$('#parent').on('click', function(event){
$('#input').focus();
console.log('parent clicked!');
//event.stopPropagation(); <-- Not needed
});
$('#parent').on('click', '.child', function(event){
event.stopPropagation();
// ^^^^ Add here
console.log('child clicked!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent" class="areatext" onkeydown="checkR()">Parent
<div id="input" contenteditable="true" style="min-height:26px;" onkeyup="checkTyping()"></div>
<div class="child">child</div>
</div>
以上是关于jQuery事件捕获停止传播的主要内容,如果未能解决你的问题,请参考以下文章