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什麼都不做。