区分 event.preventDefault() 和 event.stopPropagation()

event.preventDefault();阻止默认行为

event.stopPropagation();//阻止事件往上冒泡

<style>
#text,.testdiv{
    width: 50px;
	height: 50px;
	color: #666;
	border:1px solid #ddd;
}
.outdiv{
	width: 50px;
	height: 50px;
	background-color: #f2f2f2;
}
.innerdiv{
	width: 20px;
	height: 20px;
	background-color: #e5e5e5;
}
</style>
<div class="testdiv"><a href="https://www.baidu.com">div2</a></div>
<div class="outdiv">
	<div class="innerdiv"></div>
</div>

<script>
   var testdivA = document.querySelector('.testdiv a');
   testdivA.addEventListener('click',function(event){
   	   event.preventDefault();//阻止默认行为 a链接不跳转
   	   alert('ok'); 
   })

   var innerdiv = document.querySelector('.innerdiv');
   var outdiv = document.querySelector('.outdiv');
   innerdiv.onclick = function(){
   	  event.stopPropagation();//阻止事件冒泡到父元素outdiv，所以不执行outdiv的onclick事件
   	  alert('innerdiv');
   }
   outdiv.onclick = function(){
   	  console.log('outdiv');//没有event.stopPropagation()，子元素的事件会冒泡到父元素上
   }
</script>