javascript-阻止事件冒泡和事件預設行為
阿新 • • 發佈：2019-01-08
1.事件冒泡
（1-1）冒泡是什麼？
事件冒泡就像熱水沸騰時產生汽泡往上升的情形一樣(往上傳遞的過程),事件冒泡出現的情況:假設一個html結構中兩個標籤存在父子層級關係，父盒子和子盒子都繫結一個相同的方法時,當點選子盒子時將會觸發執行兩次方法但實際期待:點選子盒子就單獨觸發子盒子的事件而不涉及父盒子的方法,解決辦法:阻止冒泡.
(1-2)阻止冒泡程式碼
不同瀏覽器對阻止冒泡的寫法存在相容問題,在ie瀏覽器中阻止冒泡的方法是window.event.cancelBubble=true而在谷歌,火狐等瀏覽器的方法則是e.stopPropagation()
<!DOCTYPE html> 2.阻止預設行為
(2-1)預設行為是什麼?
瀏覽器存在自己的預設行為,預設行為是瀏覽器的預設初始值!有一些瀏覽器行為是在事件處理程式執行前發生的，也就是說這些預設行為是無法取消的,需要人為去遮蔽瀏覽器的預設行為.舉個常見例子全選頁面內容,瀏覽器跳轉到另外一個頁面等都屬於瀏覽器的預設行為.
(2-2)阻止預設行為程式碼?
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>javascript停止冒泡和阻止瀏覽器預設行為</title>
</head>
<body>
<!--阻止預設行為-->
<a href='http://www.taobao.com' onclick='stoppreevntDefault(event)'>我要跳轉到淘寶頁面</a>
</body>
<script type='text/javascript'>
//阻止預設行為
function stoppreevntDefault(e){
//考慮要相容ie瀏覽器
e.preventDefault?e.preventDefault():window.event.returnValue=false;
}
</script>
</html>3.第二種阻止預設行為的方法但是不阻止冒泡事件
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>javascript停止冒泡和阻止瀏覽器預設行為</title>
</head>
<body>
<!--阻止預設行為方法2-->
<div id='div' onclick='alert('div');'>
<ul onclick='alert('ul');'>
<li id='ul-a' onclick='alert('li');'><a href='www.taobao.com'id='testB' );'>superman</a></li>
</ul>
</div>
</body>
<script type='text/javascript'>
//阻止預設行為第二種方法
var a = document.getElementById('testB');
a.onclick = function(){
return false;
};
</script>
</html>
4.做個假設能不能又阻止預設行為又阻止冒泡呢?
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>javascript停止冒泡和阻止瀏覽器預設行為</title>
</head>
<body>
<!--判斷能不能既阻止預設行為也阻止冒泡事件-->
<div onclick='stopproPagations(event)'>
<a href='http://www.taobao.com' onclick='stopproPagations(event)'>我要跳轉到淘寶頁面</a>
</div>
</body>
<script type='text/javascript'>
function proPagation(e){
window.event?alert('方法被執行'+(window.event.srcElement)):alert('方法被執行'+e.target)
stopproPagations(e);
}
//阻止冒泡和預設行為的方法！
function stopproPagations(e){
window.event?window.event.cancelBubble=true:e.stopPropagation();
e.preventDefault?e.preventDefault():window.event.returnValue=false;
}
</script>
</html>