JS中如何阻止默认行为和冒泡事件

<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