jQuery - 选择器

Question

如何将onClick操作绑定到除可点击元素之外的行？
例如，我有这样的表：

... 
<tbody> 
    <tr> 
     <td> 
      something 
     </td> 
     <td> 
      <a href="some_url.php">link</a> 
     </td> 
    </tr> 
</tbody> 
... 

如果我用这样的代码：$('tbody > tr').click(function(){ alert('clicked'); });然后当我点击行（包括链接），我会得到我的函数中执行的任何部件。但我希望只有当我点击不在可点击的元素（我的例子中的“a href”）时才会执行它。事件冒泡的

Answer 1

利用：

$('tbody > tr').click(function(e) { 
    /* do something */ 
}); 

$('tbody > tr a[href]').click(function(e) { 
    e.stopPropagation(); 
}); 

当点击一个链接它会照常工作，但避免click事件冒泡到tr所以它的点击处理程序将无法在这种情况下触发。

Answer 2

我想你可以一个.stopPropagation()添加到链接本身：

$('tbody > tr').click(function(){ 
    alert('clicked'); 
}); 
$('tbody > tr a').click(function(e){ 
    e.stopPropagation(); // Prevents the `click` to bubble to the tr handler 
}); 

基本上，click活动将每默认情况下，“泡沫”（传播）了DOM树。也就是说，只有在tbody > tr的click处理程序，在tr点击将导致click事件这些元素（顺序）：

1. 的tr
2. 的tbody
3. 的table
4. ...
5. The body
6. （该html？ - 不确定）

现在，.stopPropagation()呼叫事件“冒泡DOM树，阻止任何父处理程序被通知的事件阻止事件。”（source），因此专用处理器结合a元素将捕获（停止）的click事件上a元素，但作为前离开tr处理程序（不同之处在于在a元素点击捕捉那些click事件由tr处理程序处理。）