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();  //阻止默认行为 ( 表单提交 )