DOM事件:stopPropagation vs preventDefault() vs return false

在處理JavaScript中的DOM事件時,總有一件事我經常感到困惑。

在事件處理程序中,應該在什麼時候呼叫event.stopPropagation()? 在事件處理程序中,應該在什麼時候呼叫event.preventDefault()? 應該使用return false嗎?

Event.stopPropagation

假設我想要處理某個元素上的點擊事件。

默認情況下,DOM元素上的事件在特定元素上觸發(比如按鈕),並且會向上傳遞到其所有父元素樹中,除非被停止。

我希望確保事件在我的事件處理程序中完全處理,並且在那裡“停止”。

你可以在事件處理程序的末尾調用Event對象的stopPropagation()方法來停止傳播:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
   // 處理事件
   // ...
   event.stopPropagation()
})

Event.preventDefault

調用事件對象的preventDefault()方法將取消瀏覽器預設執行的處理。

例如,在單擊a元素時,會打開新頁面。

或者在提交事件上提交表單。

調用preventDefault()是您需要完全自定義操作的時候。也許通過創建一個fetch請求來加載一些JSON,而不是在點擊鏈接時打開新頁面。

對於同一元素定義的其他事件處理程序將被執行。除非您調用event.stopImmediatePropagation()。

返回false

這對於以前(或現在)使用jQuery的開發人員來說尤其令人困惑。在jQuery中,從事件處理程序返回false會自動為我們調用event.preventDefault和event.stopPropagation。

在普通的JavaScript中,在事件處理程序中返回false什麼都不做。