Question

我在父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
}

Answer 1

正如您所说，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>

Answer 2

如果您希望在单击子div时不调用父div的点击处理程序，则必须在子div的click事件处理程序中添加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>

我建议您阅读https://javascript.info/bubbling-and-capturing，以了解冒泡和捕获在JavaScript中是如何工作的。

jQuery事件捕获停止传播

2 个答案: