mouseover 问题

一个DIV鼠标在上面移动，只要一直在范围内，只会触发一个onmouseover事件但是假如这个DIV中还嵌套有n个子DIV，那么在这n个子DIV之间移动的时候，每跨越一次DIV就是触发一次onmouseover事件。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><script>
var times = 0;
function show(){times = times+1;
document.getElementById("times").innerHTML=times; }
</script><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<label id="times"></label>
<div id="popWin" onMouseOver="show();" style="width:300px;border:50px solid #06F;height:200px;">
<div id="popWin2" style="width:150px;height:200px;float:left;background:#777;">
</div>
<div id="popWin3" style="width:150px;height:200px;float:left;background:#222;">
</div>
</div><br/>
<div id="popWin4" onMouseOver="show();" style="width:300px;border:50px solid #06F;height:200px;">
</div></body>
</html>请高手指点这是个什么情况，如何避免多次触发，感觉不像冒泡，因为子DIV上没有onmouseover事件

解决方案 »

  1.   

    onMouseOver="show();"改为onmouseenter="show();"
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><script>
    var times = 0;
    function show(ele){
    var fun=arguments.callee.caller;
    var evt=fun.arguments[0];
    if(evt){//非IE 
    var that=evt.relatedTarget;
    var pos=ele.compareDocumentPosition(that);
    if(pos==0||pos==20){
    return;
    }
    }else{//IE
    var that=window.event.fromElement;
    if(ele==that||ele.contains(that)){
    return;
    }
    }
    times = times+1;
    document.getElementById("times").innerHTML=times;    
    }
    </script><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head><body>
    <label id="times"></label>
    <div id="popWin" onMouseOver="show(this);" style="width:300px;border:50px solid #06F;height:200px;">
    <div id="popWin2" style="width:150px;height:200px;float:left;background:#777;">
    </div>
    <div id="popWin3" style="width:150px;height:200px;float:left;background:#222;">
    </div>
    </div><br/>
    <div id="popWin4" onMouseOver="show(this);" style="width:300px;border:50px solid #06F;height:200px;">
    </div></body>
    </html>
      

  3.   

    这很正常啊你自己写的方法啊。。最外层写的over方法。。
      

  4.   

    谢谢大家的帮助
    1楼的兄弟，onmouseenter事件只有ie支持。
    2楼的兄弟可以解决
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script>
            var times = 0;
            function show() {
                times = times + 1;
                document.getElementById("times").innerHTML = times;
            }
        </script>
        
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>无标题文档</title>
    </head>
    <body>
        <label id="times">
        </label>
        <div id="popWin" onmouseover="show();" style="width: 300px; border: 50px solid #06F;
            height: 200px;">
            <div id="popWin2" onmouseover="event.cancelBubble=true;" style="width: 150px; height: 200px; float: left; background: #777;">
            </div>
            <div id="popWin3" onmouseover="event.cancelBubble=true;" style="width: 150px; height: 200px; float: left; background: #222;">
            </div>
        </div>
        <br />
        <div id="popWin4" onmouseover="show();" style="width: 300px; border: 50px solid #06F;
            height: 200px;">
        </div>
    </body>
    </html>
      

  6.   


    我试了下，firefox也行的啊 
      

  7.   


    我的firefox7.0.1不行，另外测试了chrome17，safari5.1也不可以。opera 11.6倒是可以
      

  8.   


    这位兄弟是按冒泡解决的，但效果不是我想要的。我希望的结果是，只要以上popWin就算一次，在它以及它的子DIV里随意移动都不会重复触发事件，就是二楼兄弟的那种效果。你这样的效果是在popWin2，和popWin3上不触发popWin的事件了，但你不论从popWin外，还是从popWin2和popWin3移动到popWin（就是那个蓝色的boader上）的时候还会触发，你可以试一下。谢谢您的回复，同样也期待更好的方法
      

  9.   

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <label id="times"></label>
    <div id="popWin" style="width:300px;border:50px solid #06F;height:200px;">
    <div id="popWin2" style="width:150px;height:200px;float:left;background:#777;"></div>
    <div id="popWin3" style="width:150px;height:200px;float:left;background:#222;"></div>
    </div>

    <br/>
    <div id="popWin4" style="width:300px;border:50px solid #06F;height:200px;">
    </div>

    <script>
    var times = 0,
    showDiv = document.getElementById("times");
    document.getElementById('popWin').onmouseover = function(event){
    var e = event || window.event,
    relatedTarget = e.relatedTarget || e.fromElement;
    if(!contains(this, relatedTarget)){
    times = times+1;
    showDiv.innerHTML=times;   
    }
    }
    function contains(elem1, elem2){
    if(elem1.compareDocumentPosition){
    var state = elem1.compareDocumentPosition(elem2);
    return state === 0 || state === 20 ? true : false;
    }else{
    return elem1.contains(elem2);
    }
    }
    </script>
    </body>
    </html>