触发内部元素上的点击事件 [英] Trigger a click event on an inner element

问题描述

需要单击并打开一个网址的表中每行包含链接的行。

 < table> 
< tr> 
< td>< a class =fancyboxhref =detail.aspx？CID = 67525> LT5C260A436C41< / a>< / td> 
< td>更多数据< / td> 
< / tr> 
< tr> 
< td>< a class =fancyboxhref =detail.aspx？CID = 17522> LA5C260D436C41< / a>< / td> 
< td>更多数据< / td> 
< / tr> 
 ... 
< / table> 
  

完整的行应该是可点击的，而不是只有链接顶部打开 fancybox ，即页面本身。

所以我试过做这样的事情：

  $（table tr）bind（'click'，function（e）{
 e.stopPropagation（）; 
 $（this）.find（a）。trigger（'click'）; 
}）; 
  

但是似乎事件是循环冒泡导致：

未捕获RangeError：超过最大调用堆栈大小

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

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

解决方案

这样做很好：

  $（table tr ）.click（function（e）{
 var $ link = $（this）.find（a）; 
 
 if（e.target === $ link [0] ）return false; 
 
 $ link.trigger（'click'）; 
 return false; 
}）; 
  

编辑：

为什么大多数解决方案无法工作？他们失败了，因为当链接被点击时，附加的立即处理程序就会运行。事件然后 bubbles 查看处理程序是否附加到表单元格，行等。

当您建议触发点击时，您将导致递归：链接被点击→fancybox→气泡→aha！表行→触发链接点击→链接被点击...

当你建议停止传播时，请注意，事件停止冒泡到父元素，所以一个点击附加到 body 的处理程序将不会被执行。

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

---

查看更新的小提琴： a href =http://jsfiddle.net/F5aMb/28/ =noreferrer> http://jsfiddle.net/F5aMb/28/

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/

这篇关于触发内部元素上的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！