为什么onmouseover会被重复触发啊？


<html>
<head>
<title></title>
<style type="text/css">
*{font-size:12px;color:#666666;}
ul{list-style-type:none;margin:0;padding:0;}
#log{border:1px solid #e9e9e9;height:240px;width:120px;position:absolute;right:0;top:0;overflow:scroll;}
</style>
</head>
<body>
<div id="log"></div>
<ul>
<li id="test"><a href="#">test</a>
<ul>
<li>3424234</li>
<li>3424234</li>
<li>3424234</li>
<li>3424234</li>
<li>3424234</li>
<li>3424234</li>
</ul>
</li>
</ul>
<script type="text/javascript">
document.getElementById("test").onmouseover=function(event){
var evt=window.event||event;
document.getElementById("log").innerHTML+=evt.type+"<br />";
}
</script>
</body>
</html>我只是给上面一个li绑定了onmouseover啊，为什么在子元素里面移动也会重复触发？

解决方案 »

  1.   

    整个li元素为<li id="test"><a href="#">test</a>
            <ul>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
            </ul>
        </li>在这整个元素内都会触发你定义的事件。
      

  2.   

    楼主 可以参考下
    http://www.iteye.com/topic/1114741
      

  3.   

    这个文章或许也对你有用。
    http://www.mangguo.org/javascript-events-order-bubbling-and-capture/
      

  4.   


    <html>
    <head>
        <title></title>
        <style type="text/css">
    *{font-size:12px;color:#666666;}
    ul{list-style-type:none;margin:0;padding:0;}
    #log{border:1px solid #e9e9e9;height:240px;width:120px;position:absolute;right:0;top:0;overflow:scroll;}
        </style>
    </head>
    <body>
    <div id="log"></div>
    <ul>
        <li id="test"><a href="#">test</a>
            <ul>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
                <li>3424234</li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
    document.getElementById("test").onmouseover=function(event){
        var evt=window.event||event;
    var s = evt.fromElement || evt.relatedTarget;
        if( document.all ){  
            if(  !(s == this || this.contains(s))  ){
    document.getElementById("log").innerHTML+=evt.type+"<br />";
            }  
        }else{  
            var res= this.compareDocumentPosition(s) ;     
            if(  !(s == this || res == 20 || res == 0 )  ){  
               document.getElementById("log").innerHTML+=evt.type+"<br />";
            }  
        }     
    }
    </script>
    </body>
    </html>参考
    http://hi.baidu.com/tnzzjh/blog/item/9ef8f8cf8625b129f9dc61d8.html
      

  5.   

    <script type="text/javascript">
    document.getElementById("test").onmouseover=function(event){
        var evt=window.event||event;
      // 来源dom
    evt.relateTarget = evt.fromElement || evt.relateTarget;
    var fromEl = evt.relateTarget;
    // 如果是从BODY滑入的
            if(fromEl.tagName == "BODY") {
    document.getElementById("log").innerHTML+=evt.type+"<br />";
    }
        
    }
    </script>