/

events-stoppropagation-preventdefault

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

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

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

Event.stopPropagation

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

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

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

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

1
2
3
4
5
6
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什麼都不做。