jquery 事件代理中的取消冒泡传递

最新推荐文章于 2019-10-11 17:55:59 发布

原创最新推荐文章于 2019-10-11 17:55:59 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

155 篇文章

订阅专栏

本文介绍了一个关于jQuery中事件冒泡的实例，演示了如何使用stopPropagation()方法来阻止事件冒泡，尤其是在使用委托事件处理的情况下。通过具体的HTML结构和jQuery代码，展示了不同层级元素上点击事件的触发顺序及如何在特定层级阻止事件继续向上冒泡。

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

jquery 如果不是直接绑定到元素上的事件（通过delegate 绑定的，也无法取得直接元素，）如果想终止事件冒泡，可以在低一级注册代理事件并将其stopPropagation（）掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery.js"></script>
    <style>
        .container {
        }
    </style>
</head>
<body>
<div class="container" id="hig">
    hig
    <div id="def">def
        <div id="abc">abc</div>
    </div>
</div>
<script>
    $(function () {
        $("body").on("click", "#abc", function () {
            console.log("out")
        })
        $("#abc").click(function (e) {
            console.log("abc")
            //e.stopPropagation();
            //    return false;
        })
        $("#def").click(function () {
            console.log("def")
        })
        $("#hig").click(function (e) {
            console.log("hig");
        })
        $("#hig").on("click", "#abc", function (e) {
            console.log("out -hig-abc");
            e.stopPropagation();
        })
    })
</script>
</body>
</html>