为什么onmouseover会被重复触发啊解决思路-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20477 次

为什么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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>