javascript, jQuery阻止默認事件和冒泡事件
阿新 • • 發佈：2018-10-28
itl 節點 func ret turn bsp opp var prevent
事件冒泡（event bubbling）
事件冒泡是指一個元素上的事件被觸發，然後這個事件按嵌套順序在父級元素上觸發，直至document根節點。
例如：
<!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div> </body> </html>
如果單擊了頁面中的<div>元素，那麽事件會按以下順序傳播：
<div> --> <body> --> <html> --> document
也就是說，click 事件首先在<div>元素上發生，這個元素就是被點擊的元素。然後，click事件沿著DOM樹向上傳播，在每一級節點上都會發生，直至document對象。
下圖展示了事件冒泡的過程：
js阻止事件冒泡
var div = document.getElementById("myDiv") div.onclick= function(event) { event.stopPropagation() // 或者直接使用return false，即阻止了事件冒泡也阻止了默認事件 // return false }
js阻止默認事件
1.通過on這種方式的綁定的事件，使用return false：
var div = document.getElementById("myDiv") div.onclick = function(event) { returnfalse //使用return false，即阻止了事件冒泡也阻止了默認事件 }
Listener綁定的，使用evevt.preventDefault()：
var div = document.getElementById("myDiv") div.addEventListener( " click ", function(event) { event.preventDefault() })
//jQuery阻止事件冒泡和默認事件 //阻止事件冒泡： $(document).ready(function() { $(‘#myDiv‘).click( function(event) { event.stopPropagation() }) }) //阻止默認事件： $(document).ready(function() { $(‘#myDiv‘).click( function(event) { event.preventDefault() }) })
javascript, jQuery阻止默認事件和冒泡事件