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

最新推荐文章于 2025-08-07 21:48:39 发布

转载最新推荐文章于 2025-08-07 21:48:39 发布 · 61 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery的HTML页面示例，展示了如何通过调用stopPropagation方法来阻止事件冒泡，实现对不同层级div元素点击事件的精确控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()方法组织冒泡事件

关注博主即可阅读全文