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

Question

所以我有以下场景:

<div id="block">
Sample text.
<a href="#">Anchor link</a>
</div>

<script type="text/javascript">
    $("#block").click(function() { alert('test'); });
</script>

当我点击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阅读事件属性.