使用onclick事件解锁div内的'a'的onclick事件

Question

HTML：

<div id="container">
<div class="desc">desc</div>
<a href="foo.php">foo</a>
</div>

JS：

$('#container').click(function(){
    ...
    my_function();
    ...
});

当用户在容器内部单击除a标记之外时，这是有效的。

如果用户单击标记，则会触发单击事件。但是，我想禁用标签的自定义单击功能。也就是说，链接到没有onlick事件的页面。

这不起作用：

$('#container :not(a)').click();

Answer 1

听起来你想阻止A标签触发的默认点击事件 - 使用：

$('#container a').click(function(e) {
  e.preventDefault();
});

修改

要防止在用户点击链接时触发您的活动：

$('#container').click(function(e) {
  if(e.target.tagName !== 'A') {
    my_function();
  }
});

Answer 2

检查事件是否来自a标记，如此

$('#container').click(function(e){
    if ($(e.target).is('a')) return;
    ...
    my_function();
    ...
});

Answer 3

将click事件处理程序附加到您的链接，告诉他们在执行自己的处理程序后停止事件冒泡：

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

其他解决方案不适用于使用图像作为锚点的超链接。 （target = object HTMLImageElement＆amp; tagName = DIV）