其他分享
首页 > 其他分享> > jQuery取消事件冒泡

jQuery取消事件冒泡

作者：互联网

取消事件冒泡

  1. 引入jQuery

    <script src="js/jquery-3.5.1.js"></script>

  2. 画图

    <div id="father" style="width: 300px;height: 300px;border: 1px solid red;">
    <div id="son" style="width: 100px;height: 100px;border: 1px solid blue;"></div>
</div>

  3. 写jQuery

        $(function(){
        $("#father").on("click",function(){
            alert("oneoneone")
        })
        $("#son").on("click",function(event){
            //停止事件冒泡（就是大盒子套小盒子，取消点击小盒子时大盒子也响应的问题）
            event.stopPropagation()
            alert("twotwotwo")
        })
    })

拷贝即用

要记得引入jQuery

<body>
    <script type="text/javascript">
        $(function(){
            $("#father").on("click",function(){
                alert("oneoneone")
            })
            $("#son").on("click",function(event){
                //停止事件冒泡（就是大盒子套小盒子，取消点击小盒子时大盒子也响应的问题）
                event.stopPropagation()
                alert("twotwotwo")
            })
        })
    </script>
    <div id="father" style="width: 300px;height: 300px;border: 1px solid red;">
        <div id="son" style="width: 100px;height: 100px;border: 1px solid blue;"></div>
    </div>
</body>

标签：jQuery,function,取消,小盒子,click,冒泡,alert,event
来源： https://www.cnblogs.com/letgofishing/p/14396034.html