<a href="https://www.baidu.com">百度跳转</a>
超链接的默认行为是点击百度跳转就会跳转到百度搜索页面,现在我们不想要这个默认的跳转事件
<script>
var a=document.querySelector('a')
a.addEventListener('click',function(e){
(1) e.preventDefault()
(2)e.returnValue=false
})
(3)a.onclick=function(e){
return false;
}
</script>
综上 阻止默认事件,一共有3种方式
//谷歌及IE8以上
e.preventDefault();
//IE8及以下
window.event.returnValue = false;
//无兼容问题(但不能用于节点直接onclick绑定函数,只限于传统方式)
return false;
<div class="box">
父元素
<div class="one">子元素</div>
</div>
var box=document.querySelector('.box')
var one=document.querySelector('.one');
box.addEventListener('click',function(){
console.log('我是父元素');
})
one.addEventListener('click',function(e){
console.log('我是子元素');
})
此时我们点击子元素会触发父元素,但我们此时不想要这个事件冒泡,我们只想要点击谁就触发谁,这时我们给子元素添加阻止冒泡事件
one.addEventListener('click',function(e){
console.log('我是子元素');
e.stopPropagation()
//ie 6.7.8
e.cancelBubble=true
})
综上所述:
-
阻止默认行为
- 一般用 e.preventDefault()
- 但是IE8及以下要用e.returnValue=false
- 传统方式直接用return false;
-
阻止冒泡事件
- 一般方法e.stopPropagation(),
- /IE浏览器(IE11)以下使用e.cancelBubble = true