欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

你知道JQuery中的事件冒泡吗,他是怎么执行的,如何来停止冒泡事件?

程序员文章站 2022-04-03 17:13:24
...

事件冒泡

首先需要知道什么是事件冒泡?

事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件

demo:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>4-4-1</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 13px;
            line-height: 130%;
            padding: 60px;
        }

        #content {
            width: 220px;
            border: 1px solid #0050D0;
            background: #96E555;
        }

        span {
            width: 200px;
            margin: 10px;
            background: #666666;
            cursor: pointer;
            color: white;
            display: block;
        }

        p {
            width: 200px;
            background: #888;
            color: white;
            height: 16px;
        }
    </style>
    <script src="../scripts/jquery-1.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            // 为span元素绑定click事件
            $('span').bind("click", function () {
                $("#msg").append("<p>内层span元素被点击.<p/>")
            });
            // 为div元素绑定click事件
            $('#content').bind("click", function () {
                $("#msg").append("<p>外层div元素被点击.<p/>")
            });
            //// 为body元素绑定click事件
            $("body").bind("click", function () {
                $("#msg").append("<p>body元素被点击.<p/>")
            });
        })
    </script>
</head>
<body>
    <div id="content">
        外层div元素
        <span>内层span元素</span>
        外层div元素
    </div>

    <div id="msg"></div>
</body>
</html>

当点击内层的span事件时,外层的div事件和body,也会执行的。

 

你知道JQuery中的事件冒泡吗,他是怎么执行的,如何来停止冒泡事件?

如何阻止冒泡事件?

一般来说有三种方法:

  1. 使用stopstopPropagation;
  2. 使用retrun false;
  3. 使用阻止默认行为preventDefault;

1.使用stopstopPropagation

只需要在后面加入event.stopPropagation();就可以阻止事件冒泡

  $('span').bind("click", function () {
                $("#msg").append("<p>内层span元素被点击.<p/>")
                event.stopPropagation();
            });

2.使用retrun false;

  $('span').bind("click", function () {
                $("#msg").append("<p>内层span元素被点击.<p/>")
                return false;
            });

3.使用阻止默认行为

JQuery阻止默认行为

retrun false和 stopstopPropagation的区别

return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。

event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

相关标签: JQuery