图片放大镜-子级影响父级bug-解决方式2

发表于 | 分类于 | | 阅读次数 
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 100px;background: red;}
        #div2{width: 50px;height: 50px;background: yellow;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
    <script>
        // 子级影响父级bug的解决方式
        /* 
            2.js方法解决方式  如下  
            
         */
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            oDiv1.onmouseenter=function(ev){
                var ev = ev || window.event;
                var a = this, b = ev.relatedTarget;
                
                // console.log(a.innerHTML);
                // console.log(b.innerHTML);
                
                if( !elContains(a,b) && a!=b ){
                    
                    document.title += '1';
                    
                }
            }
            oDiv1.onmouseout = function(ev){
                
                var ev = ev || window.event;
                var a = this, b = ev.relatedTarget;
                
                if(!elContains(a,b) && a!=b){
                    document.title += '2';
                    
                }
            };
        }

        
        function elContains(a, b){  //判断两个元素是否是嵌套关系  a是否嵌套包含b
            
            return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
            
        }

    </script>
</body>
</html>