0

我有一个表，在每一行（tr标签）上设置了三个事件onclick，onmouseout并且onmouseover. 对于每一行，前三个td标签包含一个onclick事件。

<tr onclick="javascript:getWSData(...)" onmouseout="this.className=clTwo" onmouseover="this.className=clThree">
    <td onclick="popDivInfo(false, verRicDivCreaInfo('details'))">
        Details
    </td> 
    <td onclick="popDivInfo(false, verRicDivCreaInfo('edit'))">
        Edit
    </td> 
    <td onclick="if(confirm('Are you sure?')) {getWSData('delete');event.stopPropagation(); } else {alert('Cancelled!')}">
        Delete
    </td> 
    <td>...</td>
    <td>...</td>
    <td>...</td>
</tr>

据我所知：一旦触发td's onclick，默认事件链应该首先执行它，然后应该执行tr's onclick。这对我来说没问题。但是，在删除（第三个td）的情况下，我不希望事件链继续前进，所以我使用了 event.stopPropagation();

标准行为是完全正确的，但我遇到了一个问题：一旦删除发生，要么详细信息要么编辑 td停止工作。第一次点击（删除后）不能发挥最佳效果（我不完全知道发生了什么），而删除仍然有效。当我第二次单击时，两个 td 的 onclick（详细信息和编辑）都刚刚完全正常工作。

还有几件事：

  • 删除前的行为是完全正确的
  • 每个删除操作都tr使用 jQueryremove方法删除它（如果我评论这条指令，什么都不会发生）
  • 发生此问题时，会在整个列（详细信息和编辑）上发生
  • 如果我不确认删除过程，问题就不会发生
  • 的tronclick 始终可以正常工作
  • 第一次单击（删除后）详细信息或编辑确实部分启动了 javascript 操作（导致启动了预加载），但此操作未完成。
  • 即使 td 动作没有完成，tr动作也会一直执行，所以没有 unusefullstopPropagation()

有任何想法吗？我完全没有想法。

4

1 回答 1

1

我记得tr有点像虚拟标记单元。这仅适用于组元素tbody，例如。它根本不参与事件冒泡。所以你不应该在它上面绑定任何事件。我们可以在示例中看到这一点：http: //jsfiddle.net/z9vVM/。在这里，您会看到绑定到tr元素的事件td无论如何都有目标，而不是tr如您所愿。将事件绑定到tr与您td在该行中为所有内容指定某个类并将事件绑定到该类相同 -tr只是对元素进行分组的方式。这就是为什么你的stopPropagation不起作用。根本没有任何传播。

你可以解决这个问题的方法是使用类进行操作。看看这个例子：http: //jsfiddle.net/RZscw/1/

于 2013-05-03T09:10:55.373 回答