在内部元素上触发点击事件

2022-01-15 00:00:00 event-handling jquery javascript

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

<tr><td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td><td>更多数据</td></tr><tr><td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td><td>更多数据</td></tr>...</表>
完整的行应该是可点击的，而不是只有链接顶部在 fancybox 中打开详细信息页面，即在页面本身中.
所以我尝试做这样的事情:
$("table tr").bind('click',function(e) {e.stopPropagation();$(this).find("a").trigger('click');});
但似乎该事件递归地冒泡导致:
<块引用>
未捕获的 RangeError:超出最大调用堆栈大小
如何以正确的方式触发对整行的点击，而不是仅触发链接，从而避免stackoverflow?
更新:我非常感谢下面的答案，但我的问题是关于触发事件，而不是执行该事件中的行为.解决方法可能很好，但在这种情况下不是.
 解决方案 
效果很好:
$("table tr").click(function(e) {var $link = $(this).find("a");if (e.target === $link[0]) 返回 false；$link.trigger('点击');返回假；});
为什么大多数解决方案都不起作用——它们失败了，因为当点击链接时，附加的即时处理程序会运行.然后该事件冒泡以查看处理程序是否附加到表格单元格、行等.
当您建议触发点击时，您会导致递归:点击链接→fancybox→气泡→啊哈！表格行→触发链接点击→链接被点击...
当您建议停止传播时，请注意事件停止冒泡到父元素，因此附加到 body 的 click 处理程序不会被执行.
为什么上面的代码有效——我们检查事件是否从链接冒泡.如果为真，我们只需返回并停止进一步传播.
<小时>
查看更新的小提琴:http://jsfiddle.net/F5aMb/28/p>
A row in a table where each first cell contains a link needs to be clicked and open a url. 
<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>

The complete row should be clickable instead of only the link top open the detail page in a fancybox, ie in the page itself.
So I tried to do something like this:
$("table tr").bind('click',function(e) {
    e.stopPropagation();
    $(this).find("a").trigger('click');
});

But it seems that the event is bubbling recursivly resulting in a:

  
Uncaught RangeError: Maximum call stack size exceeded


How can I trigger the click on the full row instead of only the link in a proper way avoiding the stackoverflow?
UPDATE: I really appreciate the answers below, but my question is about triggering the event, NOT executing the behaviour inside that event. Workarounds could be nice, but not in this case.
 解决方案 
This worked well:
$("table tr").click(function(e) {
    var $link = $(this).find("a");

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

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

EDIT:
Why most solutions don't work — they fail, because when the link was clicked, the immediate handler attached runs. The event then bubbles to see if a handler was attached to a table cell, row, etc.
When you suggest triggering a click you cause the recursion: the link was clicked → fancybox → bubbles → aha! table row → trigger the link click → the link was clicked…
When you suggest to stop propagation, please note that event stops bubbling to parent elements, so a click handler attached to body will not be executed.
Why the code above works — we check if the event bubbled from a link. If true, we simply return and stop further propagation.
See the updated fiddle: http://jsfiddle.net/F5aMb/28/

		
相关文章