jq阻止冒泡事件

最新推荐文章于 2024-08-17 15:56:45 发布

lily2016n

最新推荐文章于 2024-08-17 15:56:45 发布

阅读量1k

点赞数 2

分类专栏：前端学习 js 文章标签：函数 jquery

本文链接：https://blog.csdn.net/lily2016n/article/details/70808916

版权

js 同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

学习

7 篇文章 0 订阅

订阅专栏

阻止冒泡事件
**方式一：event.stopPropagation();

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

方式二：return false;

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

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

**这是方法一只有孩子的事件，阻止了父亲的事件**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul li{
            list-style: none;
            float: left;
            width: 200px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <Li>孩子1</Li>
        <Li>孩子2</Li>
        <Li>孩子3</Li>
        <Li>孩子4</Li>
    </ul>

</body>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
    $('ul').on('click',function(){
        alert('我是父親')
    })
    $('ul li').on('click',function(event){
        alert('我是孩子')
        event.stopPropagation();
    })
</script>
</html>