JS点击子元素不触发父元素点击事件(js阻止冒泡)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<title></title>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer}
        .divchild{position: absolute;margin:10px;width:50px;height:50px;background:white;cursor: pointer}
    </style>
    <script type="text/javascript">
        function divone(){
            //这里是divone事件的代码
            console.log('divone事件');
          
        }
         
        function divchild(){
            //这里是divchild事件的代码
            console.log('divchild事件');
            stopPropagation();
        }
 
        function stopPropagation(e) { 
            e = e || window.event; 
            if(e.stopPropagation) { //W3C阻止冒泡方法 
                e.stopPropagation(); 
            } else { 
                e.cancelBubble = true; //IE阻止冒泡方法 
            
        }
    </script>
</head>
<body>
     
    <div class="divone" onclick="divone(this)">
         
        <div class="divchild" onclick="divchild(this)"></div>
         
    </div>
  
</body>
</html>

  

 

 

转载于:https://www.cnblogs.com/gasolhome/p/12375571.html

posted @   今♀妃惜彼  阅读(794)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示