Javascript：停止onClick默認

Question

我感覺我失去了一些明顯的東西，但只是可以看到它。

上的click事件觸發設置：

anchor.addEventListener("click", myClickEvent); 
 

 
function myClickEvent() { 
 
    this.preventDefault(); // fails 
 
    return false; 
 
}

但是默認的onClick方法仍然發生。

我可以在與addEventListener同時取消默認傳播嗎？還是有其他方法可以做到這一點。我無法在myClickEvent中使用.preventDefault（），因爲該事件在該點不可用。

編輯以下評論以清楚起見： 標記的默認onClick發生，即使myClickEvent返回false。

Answer 1

從註冊爲addEventListener的處理程序返回false將不會執行任何操作。見https://stackoverflow.com/a/1357151/227299和https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

推薦的方法是調用event.preventDefault()

function myClickEvent(e) { 
    e.preventDefault() 
} 

處理程序從HTML屬性仍然可以工作，但因爲它是不清晰相比event.preventDefault()當什麼return false意味着你不應該使用它（不允許鏈接遵循）和event.stopPropagation()（不要讓事件冒泡）

Answer 2

element.addEventListener("click", myClickEvent); 

function myClickEvent(event) { 
    event.preventDefault(); 
    return false; 
} 

Answer 3

有在全球範圍內無此功能稱爲preventDefault - 您需要使用已傳入您的回調的事件。

此外請確保您將活動附加到可以點擊（窗體，錨點，按鈕等）可能可能有一個事件被阻止。

如果將事件附加到子/父元素，則不會按預期工作。

Answer 4

幾乎在那裏得益於Teemu的代碼，但不完全。

根據函數的調用方式有所不同。看似有兩個發送定義的值的隱藏的參數「這個」，並且當不帶參數稱爲發送作爲第一個可見的參數的自動事件對象：

呼叫它不帶參數：

anchor.addEventListener("click", myClickEvent); 
 

 
function myClickEvent(param1, param2) { 
 
    // this = events parent element (<a>) 
 
    // this.href = <a href=...> 
 
    // param1 = event object 
 
    // param2 = undefined 
 
    oEvent = param1; 
 
    oEvent.preventDefault(); 
 
}

但隨後的參數調用它：

anchor.addEventListener("click", function (oEvent) { myClickEvent(oEvent, myParameter); }); 
 

 
function myClickEvent(param1, param2) { 
 
    // this = [object Window] 
 
    // this.href = undefined 
 
    // param1 = event object 
 
    // param2 = myParameter 
 
    oEvent = param1; 
 
    oEvent.preventDefault(); 
 
}

注意如何在參數ameters手動發送'this'的值從事件父元素改變爲'[object Window]'，導致this.href出錯。

但是，preventDefault現在似乎工作可靠。