Question

我有一个表格，每行（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的{{1}}被触发，默认事件链应首先执行它，然后执行onclick的{{1}} }。这对我来说没问题。但是，如果删除（第三个tr），我不希望事件链向前发展，所以我使用onclick;

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

更多的事情：

删除前行为完全正确
每个删除操作都使用jQuery event.stopPropagation()方法删除其td（如果我对此指令发表评论，则不会发生任何事情）
发生此问题时，会在整个列（详细信息和编辑）
如果我不确认删除过程，则不会发生此问题
tr的onclick始终完全正常工作
详细信息或编辑上的第一次点击（删除后）确实部分启动了javascript操作（导致预加载已启动）但此操作未完成。< / LI>
即使td操作未完成，也始终会执行remove操作，因此不会有任何不完整的tr

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

Answer 1

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

你可以全身心投入的方式 - 用类操作。看一下这个例子：http://jsfiddle.net/RZscw/1/

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

1 个答案: