【小5聊】jQuery基础之冒泡事件解决点击内层div而不触发外层div事件

1、设置两个div，如下

<div id="parentDiv" style="padding:20px;width:160px;height:200px;background:#0aadff;color:#fff;">
    <span>我是外层div</span>
    <div id="childrenDiv" style="padding:20px;width: 120px;height: 110px;background:#fff;color: #333;">
        <span>我是内层div</span>
    </div>
</div>
<script>
    $("#parentDiv").click(function(){
        alert('我是外层div');
    });

    $("#childrenDiv").click(function () {
        alert('我是内层div');
    });
</script>

2、点击内层div

由于内层和外层div都绑定了单击事件，所以当点击内层div的单击事件时，也会触发外层div的单击事件

事件的触发顺序是由内到外的顺序

3、点击内层div，防止外层事件触发，俗称阻止事件冒泡

$("#childrenDiv").click(function () {

    alert('我是内层div');
    event.stopPropagation();
});