Question

由于一些非常奇怪的原因，tr window.location.href赢得了td的胜利。如果我将其替换为警告，则会按正确顺序显示：td然后tr（点击右侧td时）。

<tr onclick="window.location.href='order?order=3'">
    <td>3</td>
    <td onclick="window.location.href='user?user=Bobo'">Eisenreichová Eva</td>
    <td>08. 05. 2013</td>
    <td>Převodem</td>
    <td>Nezaplaceno</td>
    <td>Přijato</td>
    <td>0</td>
    <td></td>
</tr>

Answer 1

您需要阻止click事件冒泡到<tr>。使用此：

onclick="changeLocation(event, 'user?user=Bobo', true);"

（你也可以为<tr>事件做同样的事情）

并声明函数：

function changeLocation(e, newURL, noBubble) {
    if (noBubble) {
        e.stopPropagation();
    }
    console.log("Would be navigating to: " + newURL);
    //window.location.href = newURL;
}

（在您的真实代码中，您显然会删除console.log行并取消注释更改网址的实际部分。

DEMO： http://jsfiddle.net/yjjVy/

这样就可以了，如果你点击那个特定的<td>，它就会“赢”。如果您点击<tr>内的任何其他位置，它将“赢”（因为没有其他事件与之冲突）。

Answer 2

首先触发td onclick但是tr onclick会覆盖window.location.href

移动到另一个页面不会阻止其他javascript被调用。

window.location.href='http://www.google.com';
window.location.href='http://www.bing.com';

http://jsfiddle.net/vH758/

Answer 3

问题是点击会在dom树上冒泡。因此，第一次调用td的onclick，然后click事件传播到tr，并且也会执行该事件。

停止使用传播：

<td onclick="window.location.href='user?user=Bobo'; event.stopPropagation();">

后台发生了什么：

文档结构：

文档
- 大父母
  - 父
    - 元素
  - parent2
- ...

活动：用户点击元素

结果：

执行元素的所有点击侦听器*
活动开始冒泡
父的所有点击侦听器都已执行*
执行祖父母的所有点击监听器*
执行文档的所有点击侦听器*

*听众获取事件对象，并可以通过调用取消冒泡：

event.stopPropagation()：不允许事件传播到父级，而是执行当前级别的所有侦听器。
event.stopImmediatePropagation()：不允许事件传播给父级，也不会在同一级别调用其他侦听器

您可以在每个图层中查看click事件对象以获取信息：

当前处理事件event.currentTarget
最初点击的元素event.target

希望有所帮助

Answer 4

那是因为Javascript读取了给位置对象的最后一个href属性。这是必要的，首先它执行td onclick，然后执行tr。由于页面尚未加载，因此它指向您设置的最后一个href属性。

TR作为链接，其TD作为其他地方的链接

4 个答案:

后台发生了什么：