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

【问题标题】：How to prevent the event handler in a nested element within the target element in jQuery?如何防止jQuery中目标元素内的嵌套元素中的事件处理程序？
【发布时间】：2013-02-14 02:48:59
【问题描述】：

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

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

有没有 jQuery 可以做到这一点？

【问题讨论】：

标签： jquery dom javascript-events

【解决方案1】：

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

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

更新：

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

【讨论】：

正是我想要的，也为 e.stopPropagation +1

【解决方案2】：

你可以看看这样的东西作为使用 jQuery 的替代方法

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

演示：fiddle

使用 jQuery：

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

演示：Fiddle

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

});

【讨论】：