H5面试——如何阻止事件冒泡和默认事件

最新推荐文章于 2025-10-30 13:12:45 发布

原创最新推荐文章于 2025-10-30 13:12:45 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

H5面试专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种阻止事件冒泡的方法：使用event.stopPropagation()。通过实例展示了如何在JavaScript中阻止特定元素如div和p标签上的鼠标移过事件的冒泡行为。

如何阻止事件冒泡和默认事件

<body>
    <div id="div1">
        <p id="p1">捕获和冒泡的演示</p>
    </div>
    <div id="div2">
        <p id="p2">捕获和冒泡的演示</p>
    </div>
</body>
<script>
    //阻止冒泡的方法：
    // 方法一：event.stopPropagation(),该方法只能阻止click事件的冒泡。

    var div1 = document.getElementById("div1");
    var p1 = document.getElementById("p1");
    p1.onmouseover=click1;
    p1.stopPropagation();
    div1.onmouseover=click2;
    div1.stopPropagation();
    function click1(){
        alert("段落1被单击了");
    }
    function click2(){
        alert("div1被单击了");
    }
</script>