jQuery 单击子项时如何忽略单击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3864102/
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
How to ignore click event when clicked on children
提问by Elie
So I have the following scenario:
所以我有以下场景：
<div id="block">
Sample text.
<a href="#">Anchor link</a>
</div>
<script type="text/javascript">
$("#block").click(function() { alert('test'); });
</script>
When I click anywhere inside the div, I'm getting the 'test' alert. But, I want to prevent that from happening when I click on the "Anchor link". How can I implement that?
当我点击 div 内的任何地方时，我会收到“测试”警报。但是，当我点击“锚链接”时，我想防止这种情况发生。我该如何实施？
Thanks
谢谢
回答by Nick Craver
You can stop the clicks from bubbling up from links with an additional handler, like this:
您可以使用附加处理程序阻止点击从链接中冒泡，如下所示：
$("#block a").click(function(e) { e.stopPropagation(); });
The the alternative we were discussing in comments:
我们在评论中讨论的替代方案：
$("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); })
.click(function() { alert('test'); });?
This would prevent any child links from bubbling up (well, not really, but their handlers from executing), but not create a handler for each element, this is done via .stopImmediatePropagation().
这将防止任何子链接冒泡（好吧，不是真的，但它们的处理程序无法执行），但不会为每个元素创建处理程序，这是通过.stopImmediatePropagation().
回答by Alin Purcaru
This is what you need: http://api.jquery.com/event.target/.
这是您需要的：http: //api.jquery.com/event.target/。
Just compare to check if the element was triggered by the element you want or one of its children.
只需比较以检查元素是否由您想要的元素或其子元素之一触发。
回答by Felix Kling
You can test which node was clicked with the targetproperty of the event object:
您可以使用事件对象的target属性测试单击了哪个节点：
$("#block").click(function(event) {
if(event.target.nodeName != 'A') {
alert('test');
}
});
I suggest to read Event Propertiesfrom quirksmode.org.
我建议从 quirksmode.org阅读事件属性。
回答by methodin
$("#block").click(function(event) {
if($(event.target).attr('id') == $(this).attr('id'))
{
alert('test');
}
});
回答by Aaron Digulla
Here is a demo (jsfiddle) with a forms and two fields:
这是一个带有表单和两个字段的演示（jsfiddle）：
<div id="container">
<form>
<div class="field">
<input id="demo" type="text" name="demo" />
</div>
<div class="field">
<input id="demo2" type="text" name="demo2" />
</div>
</form>
</div>
The code looks like this:
代码如下所示：
$(document).ready(function() {
$('#container').click(function(evt) {
if(this == evt.target) {
console.log('clicked container',evt.target);
$('#demo').focus();
} else {
console.log('clicked child -> ignoring');
}
});
$('.field').click(function(evt) {
if(this == evt.target) {
console.log('clicked field div',evt.target);
$(this).find('input').focus();
} else {
console.log('clicked child -> ignoring');
}
});
});
You can click the container that contains the form to set the focus on the first input field or behind the input field to set the focus into it.
您可以单击包含表单的容器以将焦点设置在第一个输入字段或输入字段后面以将焦点设置到其中。
If you click into the field, then the click will be ignored.
如果您单击该字段，则单击将被忽略。
The code above works since jQuery assigns the DOM node to thisbefore calling event handlers, so you can easily check whether the current event was published by the DOM node by checking
上面的代码有效，因为 jQuerythis在调用事件处理程序之前将 DOM 节点分配给，因此您可以通过检查轻松检查当前事件是否由 DOM 节点发布
this == evt.target
CSS:
CSS：
#container {
width: 600px;
height: 600px;
background: blue;
}
.field {
background: green;
}
