首頁 > 開發者 > JavaScript
標籤：時間 har port element cap measure string 簡單的 oev
阻止冒泡： 冒泡簡單的舉例來說，兒子知道了一個秘密訊息，它告訴了爸爸，爸爸知道了又告訴了爺爺，一級級傳遞從而以引起事件的混亂，而阻止冒泡就是不讓兒子告訴爸爸，爸爸自然不會告訴爺爺。下面的demo 就是很好的例子<!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
<!DOCTYPE html>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消失。
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
}
javascript如何阻止事件冒泡和預設行為
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
