js基础-14-JS阻止事件冒泡和默认事件

最新推荐文章于 2023-04-06 17:49:45 发布

笑道三千

最新推荐文章于 2023-04-06 17:49:45 发布

阅读量121

点赞数

分类专栏：面试 JS

原文链接：https://blog.csdn.net/xiasohuai/article/details/86496745?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160237632819725255508798%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160237632819725255508798&biz_id=0&utm_mediu

版权

JS 同时被 2 个专栏收录

80 篇文章 5 订阅

订阅专栏

面试

34 篇文章 2 订阅

订阅专栏

什么是事件冒泡？

当事件发生后，这个事件就要开始传播（从里到外，或者从外向里）。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，或处理事件的函数并未绑定在该事件源上。
们经常利用事件冒泡机制去减少给DOM添加过多的绑定事件即事件委托，但是有时候事件冒泡也会比较烦人，影响我们的事件正常处理机制，如下：

<body>
<div id="info">
  <div class="box-1" onclick="box1()">
    最外层
    <div class="box-2" onclick="box2()">
      第二层
      <div class="box-3" onclick="box3()">
        第三层
        <div class="box-4" onclick="bubbles()">最底</div>
      </div>
    </div>
  </div>
</div>
<script>
  function bubbles(){
    console.log("最底层盒子被点击了")
  }
 
  function box1(){
    console.log("最外层盒子被点击了");
  }
 
  function box2(){
    console.log("第二个盒子被点击了");
  }
 
  function box3(){
    console.log("第三个盒子被点击了");
  }
</script>
</body>复制代码

如何阻止事件冒泡？

由上图我们可以看出，我们只点击了最里面的那个div，但是在他的父级及以上div身上所绑定的事件都被触发了，这显然不是我们想要的结果，我们实际需求是只想要触发点击的那个div上绑定的事件，我们该如何阻止浏览器的这种事件处理机制呢？

function bubbles(e){
  var ev = e || window.event;
  if(ev && ev.stopPropagation) {
    //非IE浏览器
    ev.stopPropagation();
  } else {
    //IE浏览器(IE11以下)
    ev.cancelBubble = true;
  }
}

这样我们就可以实现点击哪个div触发哪个div的方法，而对其他div不造成影响了

阻止默认事件

有以下三种方式：


//谷歌及IE8以上
e.preventDefault();
//IE8及以下
window.event.returnValue = false;
//无兼容问题（但不能用于节点直接onclick绑定函数）
return false;

具体用法：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>阻止默认事件</title>
</head>
<body>
<div id="info">
  <a href="www.baidu.com" id="test">阻止默认事件</a>
</div>
<script>
  var aDom = document.getElementById('test');
  aDom.onclick = function ( e ){
    if(e && e.preventDefault) {
      //非IE浏览器
      e.preventDefault();
    } else {
      //IE浏览器(IE11以下)
      window.event.returnValue = false;
    }
    //return false;   //或者不写上面的判断直接写这句
  };
</script>
</body>
</html>

笑道三千

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js基础-14-JS阻止事件冒泡和默认事件

什么是事件冒泡？当事件发生后，这个事件就要开始传播（从里到外，或者从外向里）。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，或处理事件的函数并未绑定在该事件源上。们经常利用事件冒泡机制去减少给DOM添加过多的绑定事件即事件委托，但是有时候事件冒泡也会比较烦人，影响我们的事件正常处理机制，如下：<body><div id="info"> <div class="box-1" onclick="box1()"> 最外层 <div
复制链接

扫一扫