码迷,mamicode.com
首页 > 编程语言 > 详细

javascript父级鼠标移入移出事件中的子集影响父级的处理方法

时间:2016-07-01 01:21:20      阅读:1176      评论:0      收藏:0      [点我收藏+]

标签:

一、我们先分析其产生的原因:技术分享

1、当鼠标从父级移入子集时触发了父级的两个事件:a、父级的mouseout事件(父级离开到子集);b、由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级);

2、当鼠标从子集移出到父级时又触发了父级的两个事件:a、由于事件冒泡影响,父级触发了mouseout事件(父级移出父级);b、再触发了父级的mouseover事件(子集移入父级)

注:红色字体的解释是事件冒泡的奇妙之处。

二、解决方法:

首先必须先熟悉以下两个方法和一个事件属性:

a,b为节点

1、a.contains(b)

如果a包含b,返回true;否则返回false;a包含a同样返回true(不兼容火狐)

2、 a.compareDocumentPosition(b) 兼容火狐

这玩意就好玩了:

a在b之后返回2;

a在b之前返回4;

a被b包含返回8;

a包含b返回16;

a包含a返回0;

3、ev.relatedTarget 

返回事件的目标节点相关的节点;

对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。(IE9以下不兼容)

但IE7/8下有ev.toElement和ev.fromElement;

mouseover事件对应ev.fromElement

mouseout事件对应ev.toElement

接下来开始解决问题:

假设a是父级;b是与事件关联的节点:

解决原因1:

方法(1)a包含b返回true,a包含a返回true;

方法(2)a移出b(mouseout)返回4+16即返回20;a移入a(mouseover)返回0;

解决原因2:

方法(1)a包含a返回true,a包含b返回true

方法(2)a移出a返回0,b移入a返回4+16即返回20;

要让以上都不执行:

见代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>解决子集影响父级事件</title>
    <style type="text/css">
    body  { width: 100%; height: 100%; padding: 0; margin: 0;}
    #div1 { width: 200px; height: 200px; background: red; }
    #div2 { width: 100px; height: 100px; background: blue;position: absolute; top: 50px; left: 50px;}
    #txt { width: 800px; background: lime; color: red; height: 50px; line-height: 50px; font-size: 30px}
    </style>
    <script>
    window.onload=function(){

        var oTxt = document.getElementById(‘txt‘);
        var a = document.getElementById(‘div1‘);
        var b = document.getElementById(‘div2‘);

        alert(b)
        a.onmouseover=function(ev){            
            var oEvent = ev || window.event;
                            
            if(toAffect(a,oEvent,‘mouseover‘)){
                oTxt.value += "移入"+" ";
            }
        
        }
        a.onmouseout=function(ev){        
            var oEvent = ev || window.event;
            if(toAffect(a,oEvent,‘mouseout‘)){
                oTxt.value += "移出"+" ";
            }

        }
    }

    
    function toAffect(obj1,ev,event){
        var obj2 = null;
        if(ev.relatedTarget){
            obj2 = ev.relatedTarget;
        }
        else{
            if(event == ‘mouseover‘){
                obj2 = ev.fromElement;
            }
            else if(event == ‘mouseout‘){
                obj2 = ev.toElement;
            }
        }
        if(obj1.contains){
            return !obj1.contains(obj2);
        }
        else{
            return !!(obj1.compareDocumentPosition(obj2)-20)&&a!=b;
        }
    }
    </script>
</head>
<body>
    <div id="div1">
        父级
        <div id="div2">子集</div>
    </div>
    <input id="txt" type="text" />
</body>
</html>

    代码中的toAffect方法便是解决子集影响父级的方法。

javascript父级鼠标移入移出事件中的子集影响父级的处理方法

标签:

原文地址:http://www.cnblogs.com/zhanyishu/p/5631655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!