事件冒泡

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

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

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，也会执行的。

如何阻止冒泡事件？

一般来说有三种方法：

使用stopstopPropagation；
使用retrun false;
使用阻止默认行为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中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？