jQuery触发('click')问题

Question

我有一个可点击的行，它将触发链接 onclick 事件，但是 trigger() 会在 tr.clickable 上引发新的点击事件并进入循环。如何防止这种情况？

<table>
    <tr class="clickable">
        <td>Test row</td>
        <td><a href="#" onclick="alert('click');" class="trigger"></a></td>        
    </tr>
</table>

JS：

$('tr.clickable').click(function(){
    var trigger = $(this).find('a.trigger');
    trigger.trigger('click');
});

这里提供实时演示，内容涉及it技术。

- marioosh

---

你为什么要做你正在做的事情？@simoncereska 给出了正确的答案，但是根据你实际想要做的事情，推理可能是错误的。你已经明确告诉它进入一个循环... - Blair McMillan

我需要的是：用户点击一行时，内部<a href... />标签的点击函数仅被调用一次并完成。 - marioosh

在这种情况下，@Matt 采取了正确的方法。 - Blair McMillan

Answer 1

这是JavaScript中事件冒泡的原因。目前您的设置有点奇怪，但解决方法之一是停止在a标签上冒泡的click事件：

$('tr.clickable a').click(function (e) {
    e.stopPropagation();
});

Fiddle

或者，如果目标事件是相同的元素，则可以不触发click触发器:

$('tr.clickable').click(function(e){
    var trigger = $(this).find('a.trigger').not(e.target);
    trigger.trigger('click');
});

Fiddle

我想最好的方式可能是第一种解决方案。

- Matt

---

我会用$('td .trigger').click(function(e){ e.stopPropagation(); alert('click'); });替换onclick。最好不要使用内联JavaScript，这是一个好习惯。 - Luigi

Answer 2

移除 trigger.trigger('click'); 就行了 :)

- simoncereska

Answer 3

尝试这个脚本

    $('tr.clickable').click(function(){
         alert('Click');
 });

现场演示

- Amir Ismail

Answer 4

我建议使用事件参数来检查点击的目标。

$('tr.clickable').click(function(e){
  if (e.target.nodeName != 'A') {
    var trigger = jQuery(this).find('a.trigger');
    trigger.trigger('click');
  }
});

- yoavmatchulsky