javascript如何阻止事件冒泡和默認行為
阿新 • • 發佈：2018-02-14
demo log 執行順序 ng- 16px capital win 秘密 mir 阻止冒泡： 冒泡簡單的舉例來說，兒子知道了一個秘密消息，它告訴了爸爸，爸爸知道了又告訴了爺爺，一級級傳遞從而以引起事件的混亂，而阻止冒泡就是不讓兒子告訴爸爸，爸爸自然不會告訴爺爺。下面的demo 就是很好的例子
如果我不阻止冒泡的話，那麽首先btn會觸發點擊時間，讓盒子顯示，但是由於box是包含在document中的，所以會向上冒泡又觸發document的點擊事件，盒子又消失。這個事件的執行順序可以在不同的點擊事件中使用alert來驗證。關於cancelBubble的兼容性處理在高版本的chrome和firefox中已經不需要兼容處理了，直接使用oEvent.cancelBubble = true 即可。下面的阻止瀏覽器事件的兼容性處理在高版本瀏覽器中同樣不需要。
默認事件。即瀏覽器本身具備的功能。
來自為知筆記(Wiz)
x48<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 300px; height: 300px; background: red; display: none; } </style> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById(‘btn‘); var box = document.getElementById(‘box‘); btn.onclick = function(ev) { var oEvent = ev || event; box.style.display = ‘block‘; //oEvent.cancelBubble = true;//高版本瀏覽器 stopBubble(oEvent); //在低版本的chrome和firefox瀏覽器中需要兼容性處理 //高版本chrome和firefox瀏覽器直接使用上面這行代碼即可 } document.onclick = function() { box.style.display = ‘none‘; } } //阻止冒泡事件的兼容性處理 function stopBubble(e) { if(e && e.stopPropagation) { //非IE e.stopPropagation(); } else { //IE window.event.cancelBubble = true; } } </script> </head> <body> <input type="button" id="btn" value="語言" /> <div id="box"></div> </body> </html>
1 2<html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 #box { 9 width: 300px; 10 height: 300px; 11 background: red; 12 display: none; 13 } 14 </style> 15 <script type="text/javascript"> 16 window.onload = function() { 17 var btn = document.getElementById(‘btn‘); 18 var box = document.getElementById(‘box‘); 19 btn.onclick = function(ev) { 20 var oEvent = ev || event; 21 box.style.display 22 //oEvent.cancelBubble = true;//高版本瀏覽器 23 stopBubble(oEvent); 24 //在低版本的chrome和firefox瀏覽器中需要兼容性處理 25 //高版本chrome和firefox瀏覽器直接使用上面這行代碼即可 26 } 27 document.onclick = function() { 28 box.style.display = ‘none‘; 29 } 30 31 } 32 //阻止冒泡事件的兼容性處理 33 function stopBubble(e) { 34 if(e && e.stopPropagation) { //非IE 35 e.stopPropagation(); 36 } else { //IE 37 window.event.cancelBubble = true; 38 } 39 } 40 </script> 41 </head> 42 43 <body> 44 <input type="button" id="btn" value="語言" /> 45 <div id="box"></div> 46 </body> 47 48</html>我所實現的效果是：點擊按鈕btn讓box顯示，而點擊其他地方則讓box消失。如果我不阻止冒泡的話，那麽首先btn會觸發點擊時間，讓盒子顯示，但是由於box是包含在document中的，所以會向上冒泡又觸發document的點擊事件，盒子又消失。這個事件的執行順序可以在不同的點擊事件中使用alert來驗證。關於cancelBubble的兼容性處理在高版本的chrome和firefox中已經不需要兼容處理了，直接使用oEvent.cancelBubble = true 即可。下面的阻止瀏覽器事件的兼容性處理在高版本瀏覽器中同樣不需要。
默認事件。即瀏覽器本身具備的功能。
function preventDefa(e){
if(window.event){
//IE中阻止函數器默認動作的方式
window.event.returnValue = false;
}
else{
//阻止默認瀏覽器動作(W3C)
e.preventDefault();
}
} function preventDefa(e){ 2 if(window.event){ 3 //IE中阻止函數器默認動作的方式 4 window.event.returnValue = false; 5 } 6 else{ 7 //阻止默認瀏覽器動作(W3C) 8 e.preventDefault(); 9 } 10} 這種是兼容性寫法，但是如果你只需要支持高版本瀏覽器的話，那麽如上文一樣，一句話即可。btn.onclick = function (){
return false;
}btn.onclick = function (){ 2 return false; 3}來自為知筆記(Wiz)
javascript如何阻止事件冒泡和默認行為