单击子项时如何忽略单击事件

所以我有以下场景：

 Sample text. Anchor link 
  $("#block").click(function() { alert('test'); });  

当我点击div内的任何地方时，我都会收到“测试”警报。 但是，当我点击“锚点链接”时，我希望防止这种情况发生。 我该如何实现呢？

谢谢

Answer 1

您可以通过附加处理程序阻止点击从链接冒泡，如下所示：

 $("#block a").click(function(e) { e.stopPropagation(); }); 

我们在评论中讨论的替代方案：

 $("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); }) .click(function() { alert('test'); });​ 

这可以防止任何子链接冒泡（好吧，不是真的，但是他们的处理程序不执行），而不是为每个元素创建一个处理程序，这是通过.stopImmediatePropagation()来完成的。

Answer 2

这就是您所需要的： http ： //api.jquery.com/event.target/ 。

只需比较一下，检查元素是否由您想要的元素或其子元素触发。

Answer 3

您可以使用事件对象的target属性测试单击了哪个节点：

 $("#block").click(function(event) { if(event.target.nodeName != 'A') { alert('test'); } }); 

我建议从quirksmode.org阅读事件属性 。

Answer 4

 $("#block").click(function(event) { if($(event.target).attr('id') == $(this).attr('id')) { alert('test'); } }); 

Answer 5

这是一个带有表单和两个字段的演示（ jsfiddle ）：

代码如下所示：

 $(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'); } }); }); 

您可以单击包含表单的容器，将焦点设置在第一个输入字段上或输入字段后面，以将焦点设置到其中。

如果单击该字段，则将忽略该单击。

上面的代码是有效的，因为jQuery在调用事件处理程序之前将DOM节点分配给this ，因此您可以通过检查来检查DOM节点是否发布了当前事件

 this == evt.target 

CSS：

 #container { width: 600px; height: 600px; background: blue; } .field { background: green; }