为什么onmouseover会被重复触发啊解决思路

为什么onmouseover会被重复触发啊？JScript codehtmlheadtitle/titlestyle typetext/css*{fon

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

JScript code

<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啊，为什么在子元素里面移动也会重复触发？

[解决办法]
楼主可以参考下
http://www.iteye.com/topic/1114741
[解决办法]
这个文章或许也对你有用。
http://www.mangguo.org/javascript-events-order-bubbling-and-capture/
[解决办法]

HTML code

<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>
[解决办法]
JScript code<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>