javascript 单击子项时没有 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10554446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
No onclick when child is clicked
提问by xorinzor
I have the following html code:
我有以下 html 代码：
<div class="outerElement">
<div class="text">
Lorem ipsum dolar sit amet
</div>
<div class="attachment">
<!-- Image from youtube video here -->
</div>
</div>
And I have a jQuery onclick event on the .outerElementhowever, I don't want the .outerElementonclick event to be called when I click on the attachment, is there some way to prevent this or to check which element is clicked?
而且我有一个 jQuery onclick 事件，.outerElement但是，我不希望在.outerElement单击附件时调用 onclick 事件，有什么方法可以防止这种情况发生或检查单击了哪个元素？
回答by Sampson
Use event.stopPropagation()on the child element.
使用event.stopPropagation()的子元素。
$(".attachment").on("click", function(event){
event.stopPropagation();
console.log( "I was clicked, but my parent will not be." );
});
This prevents the event from bubbling up the DOM to the parent node.
这可以防止事件将 DOM 冒泡到父节点。
Also part of the eventobject is the targetmember. This will tell you which element triggered the event to begin with. However, in this instance, stopPropagationappears to be the best solution.
event对象的一部分也是target成员。这将告诉您哪个元素触发了事件开始。然而，在这种情况下，stopPropagation似乎是最好的解决方案。
$(".outerElement").on("click", function(event){
console.log( event.target );
});
回答by NicB
This works without jQuery
这在没有 jQuery 的情况下有效
<div class="outerElement">
<div class="attachment">Hello</div>
</div>
<script type="text/javascript">
document.getElementsByClassName('outerElement').onclick = function(){
alert('You clicked on parent');
}
document.getElementsByClassName('attachment').onclick = function(){
event.stopPropagation();
alert('You clicked on child');
}
</script>
回答by Conrad S
I'm not what the performance implications of allowing the propagation from the child elements, but I solved this by comparing event.target and event.currentTarget:
我不是什么允许从子元素传播的性能影响，但我通过比较 event.target 和 event.currentTarget 解决了这个问题：
onClick={(event) => {
if (event.target === event.currentTarget) {
console.log('Handle click');
}
}}
This is React ^ More generalized javascript code would be:
这是 React ^ 更通用的 javascript 代码是：
$('.outerElement').click(function(event) {
if (event.currentTarget !== event.target) {
return;
}
// Handle event
});
You can also filter out specific element types like so:
您还可以过滤掉特定的元素类型，如下所示：
$('.outerElement').click(function(event) {
if (['input', 'select', 'option'].indexOf(event.target.localName) >= 0) {
return;
}
// Handle event
});
回答by Johann Burgess
Simply setting onclick="event.stopPropagation();"on the children will do.
只需设置onclick="event.stopPropagation();"在孩子身上就可以了。
回答by JaredPar
I'm not sure if you can prevent the event from firing when the attachmentitem is clicked but you can certainly filter for it
我不确定您是否可以在attachment单击项目时阻止事件触发，但您当然可以对其进行过滤
$('.outerElement').click(function() {
if ($(this).hasClass('attachment')) {
return;
}
// Handle event
});
