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 = ‘block‘;
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();
}
}
110 1function 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;
}
1 1btn.onclick = function (){
2 return false;
3}
來自為知筆記(Wiz)
javascript如何阻止事件冒泡和默認行為