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>