是否阻止在内联事件元素上传播

Question

这是我的小提琴：

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

我自己过去也遇到过这个问题。问题是"点击"是两个事件的合并：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

因此，您只需使用本地javascript事件处理程序，点击事件传播就会停止。或者对两个div都使用jQuery事件处理程序。我认为这是造成问题的原因。

下面是一个仅使用本地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>

你看到两个选项都工作