JQuery 之 阻止事件冒泡

事件冒泡：

子级触发的事件会逐层向父级传递(冒泡) ,这种现象称为事件冒泡

事件冒泡的作用：

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件

阻止事件冒泡：

方式一：在事件处理命令中添加 return false 即可，可以阻止默认事件和冒泡事件；

方式二：event.stopPropagation()，可以阻止冒泡但是允许默认事件的发生；

方式三：阻止默认事件的冒泡，event.preventDefault()，可以阻止默认事件但是允许冒泡事件的发生；

Example：

(这里以方式一做个验证，其他方式详见：https://blog.csdn.net/PY0312/article/details/101060014)

<!--CSS部分-->
<style>
    .da {
        width: 300 px;
        height: 300 px;
        background: #ccc;
    }
    .zhong {
        width: 200 px;
        height: 200 px;
        background: blue;
    }
    .xiao {
        width: 100 px;
        height: 100 px;
        background: yellow;
    }
</style>

<!--js部分-->
<script src="./js/jquery-1.12.4.min.js"> </script>
<script>
    $(function () {
        $(document).click(function () {
            alert('document')
        })
        $('.big').click(function () {
            alert('big')
        })
        $('.middle').click(function () {
            alert('middle')
        })
        $('.small').click(function () {
            alert('small')
            return false //阻止事件冒泡
        })
    })
</script>

<!--html部分-->
<div class = "big" >
    <div class = "middle" >
        <div class = "small" >
        </div>
    </div>
</div>