阻止瀏覽器默認行為和防止事件傳播主要通過先下面兩個方法實現
event.preventDefault()： 取消瀏覽器對當前事件的默認行為，比如點擊鏈接後，瀏覽器跳轉到指定頁面，或者按一下空格鍵，頁面向下滾動一段距離。
event.stopPropagation()： 阻止事件在DOM中繼續傳播，防止再觸發定義在別的節點上的監聽函數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阻止瀏覽器默認行為-黑馬程序員web前端培訓高手班http://web.itheima.com</title>
</head>
<body>
<div id="div2">2
<div id="div1">1
<a id="a" href="http://www.itheima.com" target="_blank">黑馬程序員</a>
</div>
</div>
</body>
<script>
var d2 = document.getElementById('div2');
var d1 = document.getElementById('div1');
var a = document.getElementById('a');
d2.onclick = function(e){
alert('d2');
}
d1.onclick = function(e){
alert('d1');
}
a.onclick = function(e){
alert('a');
}
</script>
</html>未阻止瀏覽器默認行為和阻止事件傳播之前
未阻止之前效果
阻止瀏覽器默認行為
<script>
var d2 = document.getElementById('div2');
var d1 = document.getElementById('div1');
var a = document.getElementById('a');
d2.onclick = function(e){
alert('d2');
}
d1.onclick = function(e){
alert('d1');
}
a.onclick = function(e){
alert('a');
// 阻止瀏覽器默認行為
e.preventDefault();
}
</script>由於e.preventDefault()阻止了瀏覽器默認行為，所以點擊“黑馬程序員”，不會跳轉黑馬程序員官網。
阻止瀏覽器行為之後效果
阻止事件傳播
<script>
var d2 = document.getElementById('div2');
var d1 = document.getElementById('div1');
var a = document.getElementById('a');
d2.onclick = function(e){
alert('d2');
}
d1.onclick = function(e){
alert('d1');
}
a.onclick = function(e){
//阻止事件傳播
e.stopPropagation();
alert('a');
}
</script>由於e.stopProgation()阻止了事件傳播，d1和d2對象綁定的事件不會再觸發，直接跳轉到了http://www.itheima.com。
文章轉自：http://web.itheimacom
