javascript - 触发内部元素的点击事件

Question

表格中的一行，其中每个第一个单元格都包含一个链接，需要单击并打开一个网址。

<table>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td> 
    <td>more data</td>
  </tr>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td> 
    <td>more data</td>
  </tr>
  ...
</table>

整行应该是可点击的，而不是仅在 fancybox 中打开详细信息页面的顶部链接。 ，即在页面本身中。

所以我尝试做这样的事情:

$("table tr").bind('click',function(e) {
    e.stopPropagation();
    $(this).find("a").trigger('click');
});

但事件似乎递归地冒泡，导致:

Uncaught RangeError: Maximum call stack size exceeded

如何以正确的方式触发对整行而不是仅对链接的点击，以避免堆栈溢出？

更新:我真的很欣赏下面的答案，但是我的问题是关于触发事件，而不是执行该事件内的行为。解决方法可能很好，但在这种情况下不行。

Answer 1

这效果很好:

$("table tr").click(function(e) {
    var $link = $(this).find("a");

    if (e.target === $link[0]) return false;

    $link.trigger('click');
    return false;
});

编辑:

为什么大多数解决方案不起作用 - 它们会失败，因为单击链接时，附加的立即处理程序就会运行。然后该事件冒泡以查看处理程序是否附加到表格单元格、行等。

当您建议触发点击时，您会导致递归:链接被点击→ fancybox → 气泡→ 啊哈!表格行 → 触发链接点击 → 链接被点击...

当您建议停止传播时，请注意事件停止冒泡到父元素，因此附加到 body 的 click 处理程序将不会被执行。

为什么上面的代码有效 - 我们检查事件是否从链接中冒泡。如果为真，我们只需返回并停止进一步传播。

<小时/>

查看更新后的 fiddle :http://jsfiddle.net/F5aMb/28/