阻止浏览器默认行为和避免事件流传次要通过先上面两个办法实现
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