今天遇到一个问题，听我细细道来一个div id=a 里面还有一个div id =b 问题是点击a会弹出a 那么点击b 会弹出b紧接着弹出a 我想实现的效果是点击b只弹出b

最新推荐文章于 2022-07-31 00:22:14 发布

原创最新推荐文章于 2022-07-31 00:22:14 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

55 篇文章

订阅专栏

本文通过实例详细解析了JavaScript中事件冒泡的工作原理及如何使用e.stopPropagation()来阻止事件冒泡。通过两个嵌套的div元素展示了点击事件如何从内层元素向外层元素传播，并演示了如何终止这一过程。

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

查资料后知道了为什么点击b会弹出b再弹出a 这叫做js的冒泡触发，依次向外递归

话不多说上代码

<div style="width: 400px;height: 400px;background-color: #678678;font:3em bold;" id="outDiv">  
        out  
        <div style="width: 200px;height: 200px;margin: 50px;background-color: #eaceac;font:1em bold;" id="inDiv">in</div>  
    </div>

            inDiv.addEventListener('click',function(e){
                alert('in');
                e.stopPropagation();//终止事件冒泡
            },false);
            outDiv.addEventListener('click',function(e){
                alert('out');
            },false);

或者是

$('#div1').click(function(e) {
    alert('div1');
})
$('#div2').click(function(e) {
    e.stopPropagation()
    alert('div2');
    //e.stopPropagation() 位置在上在下无所谓
})

e.stopPropagation()是阻止冒泡触发的功能（）