jQuery防止冒泡事件

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

html部分

    <div class="outer">
        外层
        <div class="content">
            内层
        </div>
    </div>

jQuery部分

<script type="text/javascript">
    $(function () {
        // 为content元素绑定click事件
        $('.content').bind("click", function () {
            alert("内层被单机");
        });
        // 为outer元素绑定click事件
        $('.outer').bind("click", function () {
            alert("外层被单机");
        });
    })
</script>

运行后，我们会发现，点击内层，会触发内层和外层的单机时间，那么我们怎么去处理呢？

修改如下：

方法1：

<script type="text/javascript">
    $(function () {
        // 为content元素绑定click事件
        $('.content').bind("click", function (event) {
            alert("内层被单机");
            event.stopPropagation();    //阻止事件冒泡
        });
        // 为outer元素绑定click事件
        $('.outer').bind("click", function () {
            alert("外层被单机");
        });
    })
</script>

方法2：

<script type="text/javascript">
    $(function () {
        // 为content元素绑定click事件
        $('.content').bind("click", function () {
            alert("内层被单机");
            return false;
        });
        // 为outer元素绑定click事件
        $('.outer').bind("click", function () {
            alert("外层被单机");
        });
    })
</script>

附：

event.preventDefault();  //阻止默认行为 ( 表单提交 )