jquery - 如何防止jQuery中目标元素内的嵌套元素中的事件处理程序？

Question

<tr>
  <td>
    <a></a>
  </td>
</tr>

好的，<tr>节点有事件监听器$('tr').click(handler1)。但我不希望<a>节点具有与 has 相同的行为。

无论如何我可以在没有jQuery的情况下做到这一点吗？

Answer 1

也向 a 添加一个事件处理程序并防止默认

$(function(){
  $("tr a").click(function(e){
       e.preventDefault();
   });
});

更新：

如果您希望链接继续执行默认操作但不希望事件冒泡到 tr 则将其更改e.stopPropagation();为e.preventDefault();

Answer 2

您可以查看类似这样的内容作为使用 jQuery 的替代方法

document.getElementById('x').addEventListener('click', function(e){
    if(e.target.tagName == 'A'){
        alert('Clicked A')
    }else{
        alert('clicked tr')
    }
    }, false);

演示：小提琴

使用 jQuery：

$('tr').on('click', function(e){
    if($(e.target).is('a')){
        alert('clicked a')
    } else {
        alert('clicked tr')
    }
})

演示：小提琴

Answer 3

$('tr').click(function(e){
    e.preventDefault();
});

Answer 4

$('tr').click(function(e){    
     if($(e.target).is('#youranchorelementid')){ //you can use class also if you have many elements
    e.preventDefault();
    }

});