事件捕获、冒泡、以及解决的方法

最新推荐文章于 2024-04-17 11:31:34 发布

perwhy_wang

最新推荐文章于 2024-04-17 11:31:34 发布

阅读量964

点赞数

本文链接：https://blog.csdn.net/qq_38829069/article/details/109118565

版权

文章目录

两种方式来阻止事件冒泡。
- 方式一：event.stopPropagation();
- 方式二：return false;

1、事件捕获

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

2、事件冒泡

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

3、捕获和冒泡过程图

事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。

<!DOCTYPE html>
<html>
<head>
    <title>event</title>
</head>
<body>
    <div id="obj1">
        welcome
        <h5 id="obj2">hello</h5>
        <h5 id="obj3">world</h5>
    </div>
    <script type="text/javascript">
        var obj1=document.getElementById('obj1');
        var obj2=document.getElementById('obj2');
        obj1.addEventListener('click',function(){
            alert('hello');
        },false);
        obj2.addEventListener('click',function(){
            alert('world');
        })
    </script>
</body>
</html>

两种方式来阻止事件冒泡。

方式一：event.stopPropagation();

$("#div1").mousedown(function(event){
event.stopPropagation();
});

方式二：return false;

$("#div1").mousedown(function(event){
return false;
});

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

perwhy_wang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
事件捕获、冒泡、以及解决的方法

文章目录1、事件捕获2、事件冒泡1、事件捕获捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)2、事件冒泡冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。...
复制链接

扫一扫