一个怪异的现象，用简单的例子展示出来，怎么解释，怎么解决


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("out").addEventListener("mousemove", function(event){
document.getElementById("in2").style.display = "none";
}, false);

document.getElementById("out").addEventListener("mouseout", function(event){
alert("out:" + event.target.id);
}, false);


}
</script>
</head>
<body>



<div id="out" style="margin:0px;width:300px;height:300px">
<div id="in1" style="margin:0px;width:300px;height:300px;position:absolute;background-color:red">
</div>
<div id="in2" style="margin:0px;width:300px;height:300px;position:absolute;background-color:blue">
</div>
</div>
</body>
</html>
以上代码，在最外层的元素out上监视了mousemove和mouseout事件，当监听到mousemove的时候就会让蓝色的in2元素display为none，露出下面红色的in1块。可是很不幸，这时候由于in2消失了，所以触发了in2的mouseout事件，你说触发了就触发了，我也没给你一个监听函数，可就是这样你也不能把我赋给out元素的mouseout监听函数给触发了啊。所以就出现了鼠标一进入蓝色的块，立刻就触发了out的mouseout监听函数，而且event.target还是in2对象：alert的内容为：out:in2这个怎么解释啊。

解决方案 »

  1.   

    那我要如何通过mouseout的事件回调函数确认鼠标是真的出了out的范围？而不是因为in2不可见触发了mouseout，不要完全根据这个例子来思考，这是很特殊的情况。事实上in2和in1可能会互相不停切换。所以靠event.target!=in2是不可能了。事实上从来没有以event.target = out触发过mouseout事件
      

  2.   

    确实有些怪异 楼主你没发现么 你的最外层的div的高度是300 而里边两个也都是300 
    相当于都重叠着 不知道这种情况下最外边的一层蓝色区域 FF下是如何捕获out上的这些事件的12点了 脑袋晕晕的 希望睡觉前得一点小想法能让楼主灵光一现~~~
      

  3.   

    很奇怪 ，没有想懂。不明白为什么会触发mouseout事件 。
      

  4.   

    解决HTML内部元素的Mouse事件干扰话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。这可不是我想要的，那么怎么来&ldquo;屏蔽&rdquo;内部元素给外层元素带来的Javascript事件干扰呢？这里列举两种方法：一. setTimeout因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。具体的执行过程请看下图（纵向的虚线表示时间）： 
    这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。 二.contains在onmouseover时先进行如下判断，结果为true时再执行方法体：
    var s = e.fromElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOverFunc()}在onmouseout时先进行如下判断，结果为true时再执行方法体：
    var s = e.toElement || e.relatedTarget ;
    if(!this.contains(s)){MouseOutFunc()}
     下面来解释一下上面两行代码的含义：在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。那么上面两行代码的含义就分别是：○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：if(typeof(HTMLElement) != "undefined"){HTMLElement.prototype.contains = function(obj){            while(obj != null &&  typeof(obj.tagName) != "undefined")            {if(obj == this)return true;obj = obj.parentNode;}   return false;  };  }
      

  5.   


    function contain(obj, e) {
    if (e.currentTarget) {
      var _flag = obj.compareDocumentPosition(e.relatedTarget);  
      return (_flag == 20 || _flag == 0)? true : false;  
    } else {
        if (e.toElement != obj&&!obj.contains(e.toElement)) {
          return false;
        }else{
          return true;
        }
    }
    }判断mouseout事件的鼠标移向元素，如果当前元素是移向元素的父元素或者移向元素就是当前元素本身则不触发mouseout事件
      

  6.   


    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript">
                window.onload = function(){
                    document.getElementById("out").addEventListener("mousemove", function(event){
                        document.getElementById("in2").style.display = "none";
                    }, false);
                    
                    document.getElementById("out").addEventListener("mouseout", function(event){
                        if(!contain(this,event))return;
                        alert("out:" + event.target.id);
                    }, false);
                    
                    
                }
            
            function contain(obj, e) {
                 var evt = window.event || e;
                 if (evt.currentTarget) {
                   var _flag = obj.compareDocumentPosition(evt.relatedTarget);  
                   return (_flag == 20 || _flag == 0)? true : false;  
                 } else {
                 if (evt.toElement != obj&&!obj.contains(evt.toElement)) {
                   return false;
                 }else{
                      return true;
                 }
                 }
             }        </script>
        </head>
        <body>
            
            
            
            <div id="out" style="margin:0px;width:300px;height:300px">
                <div id="in1" style="margin:0px;width:300px;height:300px;position:absolute;background-color:red">
                </div>
                <div id="in2" style="margin:0px;width:300px;height:300px;position:absolute;background-color:blue">
                </div>
            </div>
        </body>
    </html>
      

  7.   

    不好意思判断条件写错了，if(!contain(this,event))return;这句改为if(contain(this,event))return;即可
      

  8.   

    这是事件冒泡所致，很正常
    window.onload = function(){
        document.getElementById("out").addEventListener("mouseover", function(event){
         if(event.target === this){
                document.getElementById("in2").style.display = "none";
            }
        }, true);
        
        document.getElementById("out").addEventListener("mouseout", function(event){
         if(event.target === this){
                alert("out:" + event.target.id);
            }
        }, true);
        
        
    }
    上面这段代码不支持IE，IE下请用mouseenter和mouseleave
      

  9.   

    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("out").addEventListener("mouseover", function(event){
             if(event.currentTarget === this){
             if(isParent(event.currentTarget, event.relatedTarget) && event.relatedTarget !== event.currentTarget){
                document.getElementById("in2").style.display = "none";
            }
            }, false);
            
            document.getElementById("out").addEventListener("mouseout", function(event){
             if(isParent(event.currentTarget, event.relatedTarget) && event.relatedTarget !== event.currentTarget){
                alert("out:" + event.target.id);
            }
            }, false);
        }
        function isParent(obj, pobj){
    do{
        obj = obj.parentNode;
        if(obj==pobj){
            return true;
        }
    }while(obj.tagName!='BODY');
    return false;
    }
    </script>
    上面的代码好像不太适合你这种需要，稍微改了下代码，同样不支持IE，IE请用mouseenter和mouseleave
      

  10.   

        window.onload = function(){
            document.getElementById("out").addEventListener("mouseover", function(event){
             if(isParent(event.currentTarget, event.relatedTarget) && event.relatedTarget !== event.currentTarget){
                document.getElementById("in2").style.display = "none";
            }
            }, false);
            
            document.getElementById("out").addEventListener("mouseout", function(event){
             if(isParent(event.currentTarget, event.relatedTarget) && event.relatedTarget !== event.currentTarget){
                alert("out:" + event.target.id);
            }
            }, false);
        }
        function isParent(obj, pobj){
    do{
        obj = obj.parentNode;
        if(obj==pobj){
            return true;
        }
    }while(obj.tagName!='BODY');
    return false;
    }上面的代码好像不太适合你这种需要，稍微改了下代码，同样不支持IE，IE请用mouseenter和mouseleave
      

  11.   


    document.getElementById("in2").addEventListener("mouseout", function(event){ event.stopPropagation(); }, false);
    这样也仅仅是取消了in2的冒泡。而由于in1, in2的区域覆盖了out的区域，所以由out引起的mouse事件是不可能的，也即必然由in1和in2冒泡而来。