删除过程后的 Javascript 事件和奇怪行为答案

【问题标题】：Javascript events and strange behaviour after deletion process删除过程后的 Javascript 事件和奇怪行为
【发布时间】：2013-05-03 08:25:53
【问题描述】：

我有一个表，在每一行（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 的onclick，默认事件链应该首先执行它，然后应该执行tr 的onclick。这对我来说没问题。但是，在删除的情况下（第三个td），我不希望那个事件链继续下去，所以我使用了event.stopPropagation()；

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

还有几件事：

删除前的行为完全正确
每个删除操作都使用 jQuery remove 方法删除其 tr（如果我评论此指令，则不会发生任何事情）
发生此问题时，会在整个列（详细信息和编辑）上发生这种情况
如果我不确认删除过程，问题不会发生
tr 的 onclick 始终可以正常工作
Details 或 Edit 上的第一次单击（删除后）确实部分启动了 javascript 操作（因为启动了预加载），但此操作未完成。
即使 td 动作没有完成，tr 动作也会一直执行，所以不会有无用的stopPropagation()

有什么想法吗？我完全没有想法。

【问题讨论】：

你确定你没有为所有事件设置 event.stopPropagation() 吗？
我没有明确地这样做，我担心它是由其他东西隐式设置的。
您的示例对我来说很好，请参阅jsFiddle。您必须在其他代码中执行其他操作。
@FranciscoAfonso 即使 td 操作遇到问题，也会始终执行 tr 操作。所以没有无用的 stopPropagation()。

标签： javascript html javascript-events

【解决方案1】：

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

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

【讨论】：