如何從純JavaScript代碼中取消jQuery.click？

Question

為了簡單起見：

我有一個網頁。 它具有一些腳本，其中之一將click事件綁定到<a>標記。

$('#someId').click(function() {
    ......
});

我想在此頁面上添加純JavaScript （不允許我修改其他js文件）並控制click事件。 我嘗試過如下：

document.getElementById('someId').onclick = function (event) {
    if (someCondition) {
        // cancel this click event 
        event.preventDefault();
        event.stopPropagation();
        event.cancel = true;
        return false;
    } else {
        // do something else.
    }
};

這段代碼似乎不起作用。 我需要協助。

UPDATE

對不起，我的語言含糊不清。 “純javascript”是指“使用基本的javascript操作而不是jQuery方法。”

Answer 1

我想在此頁面上添加純JavaScript（不允許我修改其他js文件）並控制click事件。

如果代碼將在該頁面上，它可以使用jQuery，這很好，因為這也是注銷jQuery注冊處理程序的唯一方法：

$("#someId").off("click").on("click", function() {
    // Your new code here
});

在元素上調用.off("click")從該元素中刪除所有 jQuery注冊的click處理程序。

就是說，通常有比掩蓋頁面上其他代碼注冊的處理程序更好的方法。

---

為什么不使用jQuery就無法注銷jQuery注冊的處理程序：第一次通過jQuery將特定事件掛接到特定元素時，jQuery在該元素上注冊了一個處理程序（自己使用），用於該事件。 如果附加了更多處理程序，則只會將它們添加到自己的內部列表中，而不會在DOM中注冊這些處理程序。 相反，當觸發DOM事件時，jQuery遍歷其處理程序列表並觸發它們。

要為元素上的事件取消注冊jQuery的實際處理程序，您必須獲得對jQuery注冊時使用的特定函數實例的引用。 （ removeEventListener不具有上述“清除所有內容”的等效項）。 該引用僅可從jQuery閉包內部的數據結構中獲得，因此如果不使用jQuery，您將無法獲得該引用。

---

如果某些情況下需要在$ .on（）塊中繼續執行其他處理程序，該怎么辦？

啊，這要困難得多。 這完全取決於您所提出的問題之外的更多上下文。 一些選項：

1. 到目前為止，最好的辦法是修改其他處理點擊的代碼。 但我知道您是說您無法做到這一點。

2. jQuery按照注冊時的順序調用處理程序（這是它自己處理調用多個處理程序的原因之一；不同的瀏覽器按不同的順序執行操作）。 因此，如果您可以在其他代碼之前 click #someId ，則可以可靠地使用event.stopImmediatePropagation()來防止調用其他處理程序。 當然，如果您的處理程序不在列表中的第一位，那將是行不通的，因為其他處理程序將首先被調用。

3. 如果#someId元素中有一個元素完全填充了該元素，則可以鈎住該元素的click ，然后使用event.stopPropagation()防止事件冒泡到#someId元素中。

4. 當然，如果沒有像＃3這樣的元素，則可以（通過代碼動態地）插入一個元素並將#someId的內容移入其中，以便將處理程序注入到冒泡中。

5. 您可以深入研究jQuery的內部原理，並弄清楚如何訪問事件處理程序鏈並進行操作。 過去很簡單； 我認為最新版本使它變得更加困難。 當然，這將進入未記錄的領域，並且可能會隨“ dot”版本的發布而改變。

Answer 2

還有另一種可能的解決方案，但不幸的是，它存在一些瀏覽器兼容性問題。 關鍵是使用css pointer-events屬性和onmousedown事件，如下所示：

$('a').click(function() {
    alert('jquery');
});

var i = 0;
btn.onmousedown = function(ev) {
    if (i++ % 2 == 0) {
        btn.style.pointerEvents = 'none'; // disable clicks

        setTimeout(function() {
            btn.style.pointerEvents = 'auto'; // enable back in 500 ms
        }, 500);
    }
};

在此處查看兼容性，並在此處演示

對於IE，您可以通過相同的方式嘗試元素disabled屬性。

並且確保最好為此使用jQuery（如果您的項目中已經使用過jQuery）

Answer 3

頁面加載后，您需要添加點擊監聽器。

window.onload=function(){
    //your code here.
};

如果您嘗試在單擊后禁用按鈕，請將“ disabled”屬性添加到按鈕並刪除單擊偵聽器。

document.getElementById('someId').onclick = null;
document.getElementById('someId').disabled = true;