最简单冒泡事件及阻止冒泡事件

Posted 2020-06-09

html代码

    <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
<div id="div1" style="height:200px;width:200px;background-color:#f0f8fc" onclick="funcDiv1();">
    <span></span>
  <div id="div2" style="height:100px;width:100px;background-color:#959595" onclick="funcDiv2(event);">
        <span></span>
        <div id="div3" style="width:50px;height:50px;background-color:#5079BB" onclick="funcDiv3();">
        <span></span>
        </div>
    </div>
</div>

javascript代码

function funcDiv1(){
    $(‘#div1 span:first‘).html(‘aaa‘);
}
function funcDiv2(event){
    //console.log(‘a‘);
    event.stopPropagation();
$(‘#div2 span:first‘).html(‘bbb‘);
}
function funcDiv3(){
$(‘#div3 span:first‘).html(‘ccc‘);
}

上面通过.stopPropagation()方法组织冒泡事件