JS中点击事件冒泡阻止

最新推荐文章于 2024-06-20 07:32:02 发布

weixin_30765319

最新推荐文章于 2024-06-20 07:32:02 发布

阅读量345

点赞数

原文链接：http://www.cnblogs.com/s313139232/p/8358193.html

版权

JS中点击事件冒泡阻止

解析：

一个div层'out'，内含有一个div层'in'。如下：

两个层都绑定了点击事件，但是点击in层的时候，点击事件会出现冒泡现象，同时也会触发out层的点击事件。

但是并不希望触发out的点击事件，只希望触发in层的点击事件，所以要阻止冒泡事件。

解决方法：

e.preventDefault()

案例代码：

<!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">
        var fun1 = function (e) {
            alert("我是父点击事件");
        }
        var fun2 = function (e) {
            e.stopPropagation();//阻止点击事件向上冒泡
            alert("我是子点击事件");
        }
    </script>
</head>
<body>
    <div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red">
        父节点
        <div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px">
            子节点
        </div>
    </div>
</body>
</html>

参考自：https://www.cnblogs.com/mdorg/p/5617408.html

　　　　http://blog.csdn.net/abb_chen/article/details/49406649

转载于:https://www.cnblogs.com/s313139232/p/8358193.html

weixin_30765319

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中点击事件冒泡阻止

JS中点击事件冒泡阻止解析：一个div层'out'，内含有一个div层'in'。如下：两个层都绑定了点击事件，但是点击in层的时候，点击事件会出现冒泡现象，同时也会触发out层的点击事件。但是并不希望触发out的点击事件，只希望触发in层的点击事件，所以要阻止冒泡事件。解决方法：e.preventDefault()案例代码：<!D...
复制链接

扫一扫