event.stopPropagation與event.preventDefault()與在DOM事件中返回false

在處理JavaScript中的DOM事件時,我總是感到一頭霧水。

我什麼時候應該打電話stopPropagation()在事件對像上?我什麼時候應該打電話preventDefault()在事件對像上?我是不是該return false

Event.stopPropagation

假設我要處理元素上的click事件。

默認情況下,在單擊的特定元素(例如,按鈕)上會觸發DOM元素上的事件,除非該事件被停止,否則該事件將傳播到其所有父元素樹中。

我想確保在事件處理程序中處理了該事件,並且該事件將在此“停止”。

您可以通過致電停止傳播stopPropagation()的方法Event對象,通常在事件處理程序的末尾:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})

Event.preventDefault

呼叫preventDefault()事件對象的方法將取消對瀏覽器進行編程以執行的默認處理。

在網頁上打開新頁面a元素click例如,事件。

或提交一個formsubmit事件。

呼喚preventDefault()您需要做的就是完全自定義操作。也許通過創建一個fetch請求加載一些JSON,而不是在鏈接單擊上打開新頁面。

在此相同元素上定義的其他事件處理程序將執行。除非你打電話event.stopImmediatePropagation()

歸來false

這對於以前的(或當前的)jQuery開發人員尤其令人困惑。在jQuery中,返回false從自動調用的事件處理程序中Event.preventDefaultEvent.stopPropagation為我們。

在普通JavaScript中,return false在事件處理程序中沒有

免費下載我的JavaScript初學者手冊


更多js教程: