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

问题描述

需要单击表格中的一行，其中每个第一个单元格都包含一个链接并打开一个 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/
这篇关于在内部元素上触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：event.keycode 与 event.which 
下一篇：检测是否支持事件监听器 
 
相关文章
在 Angular 2/Typescript 中使用 IScrollUse IScroll in Angular 2 / Typescript(在 Angular 2/Typescript 中使用 IScroll)
Anime.js 在 Ionic 3 项目中不起作用anime.js not working in Ionic 3 project(Anime.js 在 Ionic 3 项目中不起作用)
Ionic 3 - 使用异步数据更新 ObservableIonic 3 - Update Observable with Asynchronous Data(Ionic 3 - 使用异步数据更新 Observable)
Angular 2:在本地 .json 文件中找不到文件Angular 2: file not found on local .json file(Angular 2:在本地 .json 文件中找不到文件)
在 Ionic 2 中，如何创建使用 Ionic 组件的自定义指In Ionic 2, how do I create a custom directive that uses Ionic components?(在 Ionic 2 中，如何创建使用 Ionic 组件的自定义指令?)
将 ViewChild 用于动态元素 - Angular 2 &amp;离子2Use ViewChild for dynamic elements - Angular 2 amp; ionic 2(将 ViewChild 用于动态元素 - Angular 2 amp;离子2)


最新文章

为什么必须将事件对象作为参数传递?
用于编辑谷歌地图折线的事件处理程序?
在 jQuery 中绑定现有的 JavaScript 函数
使用 jQuery 监听 keydown 事件
在 Javascript 中访问事件处理程序中的类成员变量
Javascript ，事件处理程序总是被调用，即使事件没
覆盖“this"变量问题或如何调用成员函数?
焦点触发的模糊事件
JavaScript 中的保留函数名
监听来自浏览器“查找"的事件JavaScript 中的窗