鼠标移动事件，子级因为冒泡影响父级

作者: GQ1994 | 来源:发表于2016-12-04 21:01 被阅读0次

鼠标移动事件，子级因为冒泡影响父级
JS-事件捕获和冒泡
事件代理原理
Js-事件
前端JS基础八（事件）
01、JavaScript基础
冒泡事件和捕获事件
js事件监听事件冒泡和css3新增
事件委托
多级菜单增删改

在做鼠标移入，移除操作是有俩种方式

mouseover mouseout 移入/移出

子级会因为冒泡而影响父级的鼠标移入移出操作
onmouseenter onmouseout 移入/移出（子级不会影响父级）
淘宝放大镜实例：

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>无标题文档</title>
        <style>
            #div1 {
                width: 180px;
                height: 180px;
                overflow: hidden;
                position: relative;
            }
    
            #div1 span {
                width: 100px;
                height: 100px;
                background: yellow;
                opacity: 0.5;
                filter: alpha(opacity=50);
                position: absolute;
                left: 0;
                top: 0;
                display: none;
            }
    
            #mark {
                width: 180px;
                height: 180px;
                background: red;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                filter: alpha(opacity=0);
            }
    
            #div2 {
                width: 500px;
                height: 500px;
                position: absolute;
                left: 250px;
                top: 50px;
                overflow: hidden;
            }
    
            #div2 img {
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        <script>
            window.onload = function () {
                var oDiv = document.getElementById('div1');
                var oSpan = oDiv.getElementsByTagName('span')[0];
    
                var oDiv2 = document.getElementById('div2');
                var img2 = oDiv2.getElementsByTagName('img')[0];
    
                oDiv.onmouseover = function () {
                    oSpan.style.display = 'block';
                };
    
                oDiv.onmouseout = function () {
                    oSpan.style.display = 'none';
                };
    
                oDiv.onmousemove = function (ev) {
                    var ev = ev || window.event;
    
                    var L = ev.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;
                    var T = ev.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;
    
                    if (L < 0) {
                        L = 0;
                    }
                    else if (L > oDiv.offsetWidth - oSpan.offsetWidth) {
                        L = oDiv.offsetWidth - oSpan.offsetWidth;
                    }
    
                    if (T < 0) {
                        T = 0;
                    }
                    else if (T > oDiv.offsetHeight - oSpan.offsetHeight) {
                        T = oDiv.offsetHeight - oSpan.offsetHeight;
                    }
    
                    oSpan.style.left = L + 'px';
                    oSpan.style.top = T + 'px';
    
                    var scaleX = L / (oDiv.offsetWidth - oSpan.offsetWidth);
                    var scaleY = T / (oDiv.offsetHeight - oSpan.offsetHeight);
    
                    img2.style.left = -scaleX * (img2.offsetWidth - oDiv2.offsetWidth) + 'px';
                    img2.style.top = -scaleY * (img2.offsetHeight - oDiv2.offsetHeight) + 'px';
    
                };
    
            };
        </script>
    </head>
    
    <body>
    <div id="div1">
        [站外图片上传中……(2)]
        <span></span>
        <div id="mark"></div>
    </div>
    <div id="div2">
        [站外图片上传中……(3)]
    </div>
    </body>
    </html>