如果執行了錨點 href 鏈接，則禁用 onClick 事件

Question

我有一張桌子。 每行都是指向某個頁面（例如 - google.com）的鏈接，該頁面由 js“ onClick window.open ”方法調用：

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

在最后一列中，我有一個指向其他頁面的錨點 href鏈接（例如 - jsfiddle ）：

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

如果我單擊錨鏈接，它會打開，但也會打開由 onClick 調用的第一頁。

我發現了一個反向問題：

如果執行 onclick，如何禁用 HREF？

我們可以通過向 onClick 事件添加“return false”來禁用 href。

如果單擊錨鏈接，是否可以防止 onClick 執行？

這是我的演示：小提琴

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/

Answer 2

是的，這是可能的！

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

演示： 小提琴

Answer 3

這是一個老問題，但它最先出現在我的搜索結果中，我懷疑建議的答案比需要的要復雜一些。 我發現如果我將onclick="event.stopPropagation()"添加到我的錨點，則只會調用錨點，而不會調用父元素的點擊處理程序。 非常適合我的用例。