JS阻止父层事件(JS冒泡问题)

最新推荐文章于 2025-06-14 21:18:41 发布

原创最新推荐文章于 2025-06-14 21:18:41 发布 · 6.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JS阻止父层事件 #JS冒泡问题

Javascript 专栏收录该内容

33 篇文章

订阅专栏

本文通过一个具体的HTML示例介绍了如何使用JavaScript来实现事件冒泡的阻止功能。通过在子元素上触发click事件并调用stopPropagation方法，演示了如何避免事件传播到父元素。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function fun1 () {
            alert("parent");
        }
		function funx(){
            alert("child");
		}

        function stopEvt(e) {
            e.stopPropagation();//阻止点击事件向上冒泡
        }

    </script>
</head>
<body>
    <div onclick="fun1()" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red">
        父
        <div onclick="funx();stopEvt(event)" style="background-color:green;margin-top:20px;border:1px solid red;height:30px">
            子
        </div>
    </div>
</body>
</html>