javascript - 防止在内联事件元素上传播？

Question

这是我的 fiddle :

https://jsfiddle.net/rpq6swu2/

<div id="container" onclick="alert('clicked in container')">
  <div id="div1" >Something inside the other div</div>
</div>


// div1 is added dynamically normally inside the container.
$(document).on('click', '#container #div1', function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();
 alert('clicked in div1 only');
})

我无法修改 html 部分:它是由其他人完成的。

Answer 1

我自己过去也遇到过这个问题。问题在于“click”是两个事件的合并:mousedown 和 mouseup。只需将“click”更改为“mousedown”，它就应该按预期工作，如下面的代码片段所示(与您的代码相同，但有一个更改)。

$(document).on('mousedown', '#container #div1', function(e) {
	e.stopPropagation();
  e.stopImmediatePropagation();
 alert('clicked in div1 only');
})

#container  {
  background-color: red;
  width: 640px;
  height: 640px;
}
#div1 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" onclick="alert('clicked in container')">
  <div id="div1" >Something inside the other div</div>
</div>

-----编辑-----

我想指出，我相信这个问题只是因为 jQuery .on() 的工作方式 - 我认为它对“点击”的理解和原生点击事件之间存在差异。

在这里阅读比我聪明得多的人的讨论:

https://github.com/jquery/jquery/issues/3693

因此，您可以只使用 native JavaScript 事件处理程序，然后单击事件传播就会停止。或者对两个 div 使用 jQuery 事件处理程序。我认为是混合造成了这个问题。

这是仅使用 native JavaScript 的代码片段:

function onDiv1Click(e) {
  e.stopPropagation();
  alert('div 1 clicked');
}

#container  {
  background-color: red;
  width: 640px;
  height: 640px;
}
#div1 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" onclick="alert('clicked in container')">
  <div id="div1" onclick="onDiv1Click(event)">Something inside the other div</div>
</div>

这里只使用 jQuery

$(document).on('click', '#container', function(e) {
   alert('clicked in container');
})


$(document).on('click', '#container #div1', function(e) {
	e.stopPropagation();
  alert('clicked in div1 only');
});

#container  {
  background-color: red;
  width: 640px;
  height: 640px;
}
#div1 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="div1" >Something inside the other div</div>
</div>

您会发现这两个选项都有效