JS阻止默认事件和阻止冒泡事件

最新推荐文章于 2023-04-21 09:47:19 发布

郭临腾

最新推荐文章于 2023-04-21 09:47:19 发布

阅读量155

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/jtnykx/article/details/124969328

版权

JS阻止默认事件和阻止冒泡事件

什么是事件冒泡呢?

事件发生后从内到外或者从外到内的传播
因为事件源本身（可能）并没有处理事件的能力，或处理事件的函数并未绑定在该事件源上所以会发生传播

事件冒泡会经常影响事件委托机制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<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("box-4")
        }

        function box1() {
            console.log("box-1");
        }

        function box2() {
            console.log("box-2");
        }

        function box3() {
            console.log("box-3");
        }
    </script>
</body>

</html>

那么如何阻止事件冒泡！

我们只点击了最里面的那个div，但是在他的父级及以上div身上所绑定的事件都被触发了，这显然不是我们想要的结果，我们实际需求是只想要触发点击的那个div上绑定的事件

我们只需要添加stopPropagation();

这样我们就可以实现点击哪个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
点赞
踩
0

收藏

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

JS阻止默认事件和阻止冒泡事件什么是事件冒泡呢?事件发生后从内到外或者从外到内的传播因为事件源本身（可能）并没有处理事件的能力，或处理事件的函数并未绑定在该事件源上所以会发生传播事件冒泡会经常影响事件委托机制<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
复制链接

扫一扫