<a href="">百度跳转</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.8e.cancelBubble=true})
综上所述:
阻止默认行为
一般用e.preventDefault()但是IE8及以下要用e.returnValue=false传统方式直接用return false;
阻止冒泡事件
一般方法e.stopPropagation(),/IE浏览器(IE11)以下使用e.cancelBubble = true