如意小仙女前端学习第N+3天——事件冒泡

为什么要阻止冒泡？怎么解决？
很简单的一个例子，盒子one中有一个盒子two，盒子two中有一个button上面绑着事件a，而这个相同事件恰巧在盒子one和two中也有，当button事件被触发时，one和two中的事件也会被触发，所以我们需要进行阻止。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <div class="one">
        <div class="two">
            <button class="butt">Catch me</button>
        </div>
  </div>
   <script type="text/javascript" src="js/jquery2.0.min.js" ></script>
   <script type="text/javascript" src="js/Test1.js" ></script>
    </body>
</html>
<script>
$(function(){
    $('.one').on('click',function(){
        console.log('oneoneone');
    })

$('.two').on('click',function(){
    console.log('twotwotwo');
});
$('.butt').on('click',function(){
    console.log('buttonbuttonbutton');
});
});

</script>

至于阻止冒泡的方法很简单，常用的是在要实现的事件的Js代码末尾加个return false; 或者event.stopPropagation();
譬如这个例子中，button绑定的事件才是要实现的事件，所以像这样

<script>
$(function(){
    $('.one').on('click',function(){
        console.log('oneoneone');
    })

$('.two').on('click',function(){
    console.log('twotwotwo');
});
$('.butt').on('click',function(){
    console.log('buttonbuttonbutton');
    return false;  //或者改成 event.stopPropagation();
});
});
</script>
posted @ 2024-12-28 19:08  枯木雕刻者  阅读(30)  评论(0)    收藏  举报