如果执行了锚点href链接，请禁用onClick事件。

Question

我有一张表。 每行都是一个链接，指向某个页面（例如-google.com），通过js的"onClick window.open"方法调用：

<tr  class='tr' onClick="win=window.open('http://google.com');win.focus();" >

在最后一列中，我有一个指向其他页面（例如jsfiddle）的anchor href链接：

<td class='td'><a href = "http://jsfiddle.net">JSFiddle</a></td>

如果我点击锚链接，它会打开，但也会打开通过onClick调用的第一页。

我发现了一个相反的问题： 如何在执行onclick时禁用HREF？ 我们可以通过将“return false”添加到onClick事件来禁用href。

如果单击了锚链接，是否可能防止onClick执行？

这是我的演示： Fiddle

- Vladimir

Answer 1

我建议你改变一下做法。内联事件处理程序从来不是一个好主意。考虑一下这段代码。

HTML:

<table id="table">
    <tr data-url="http://google.com">
        <td>Content</td>
        <td>Content</td>
        <td><a href="http://jsfiddle.net">JSFiddle</a></td>
    </tr>
    ...
</table>

JS:

var table = document.getElementById('table');

table.addEventListener('click', function(e) {

    var target = e.target;
    if (target.tagName == 'A') {
        return false;
    }

    if (target.tagName == 'TD') {
        var win = window.open(target.parentNode.getAttribute('data-url'));
        win.focus();
    }
}, false);

示例：http://jsfiddle.net/CqRE9/

- dfsq

---

谢谢，我看到它在演示中可行，但在我的实际网站上不起作用，我会进行调查。 - Vladimir

我找到了问题 - 如果我们在表格输出之后添加js脚本，它就能正常工作，反之则不行... 我过去总是习惯将所有的js脚本都放在页面开头（在head标签中）。为什么按照我的方式不起作用呢？ - Vladimir

因为如果您在表格之前添加脚本，它将在 DOM 加载之前执行。因此，在执行时文档中没有表格。 - dfsq

只需在闭合的 </body> 标签之前添加脚本标记。 - dfsq

为什么不能在关闭body标签之前添加src脚本？ - dfsq

Answer 2

是的，这是可能的！

$("tr").on("click", function(){ 
 $(this).attr("onClick", false); 
});

演示：fiddle

- Farkhat Mikhalko

---

现在演示中无法工作...我们需要包含jQuery吗？ - Vladimir

抱歉，我看到已经引入了jQuery，但它似乎不起作用——当你点击锚链接时，两个链接都会被打开…… - Vladimir

Answer 3

这是一个老问题，但它在我的搜索结果中排名第一，我怀疑建议的答案比必要的复杂。我发现如果我在锚点中添加onclick="event.stopPropagation()"，只有锚点被调用，父元素的点击处理程序不会被调用。对于我的用例来说完美地工作。

- Joshua