阻止冒泡和浏览器默认行为

最新推荐文章于 2024-09-23 16:36:59 发布

xiaomaoyao_

最新推荐文章于 2024-09-23 16:36:59 发布

阅读量145

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/xiaomaoyao_/article/details/70168867

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .box1{
    height: 500px;
    width:500px;
    background:red;
  }
  .box2{
    height: 300px;
    width:300px;
    background:green;
  }
  .box3{
    height: 100px;
    width:100px;
    background:blue;
  }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3">

      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
window.onload = function(){
  var box1 = document.getElementsByClassName('box1')[0]
  var box2 = document.getElementsByClassName('box2')[0]
  var box3 = document.getElementsByClassName('box3')[0]
  box1.onclick = function(e){
    console.log('单击了红色的');
  }
  box2.onclick= function(){
    console.log('单击了绿色');
  }
  box3.onclick=function(e){
//如果提供了事件对象，则这是一个非IE浏览器
  if(e&e.stopPropagation)  
//W3C的方法
  e.stopPropagation();  
  else
//这是IE的方式
  window.event.cancelBubble = true;
    console.log('单击了蓝色的');
  }
}

</script>
</html>

上述例子最里面的蓝色块已经被阻止了冒泡，绿色块是有冒泡的。

//阻止浏览器默认行为
function stopDefault(e){
//阻止默认浏览器动作（W3C）
if(e&&e.preventDefault)
e.preventDefault();
//IE中阻止浏览器默认动作的方式
else
window.event.trturnValue = false;
return false;
}