onmouseout,mouseover经过子元素也触发的问题解决方案

在mouseout与mouseover的冒泡问题上,相信有很多朋友都遇到过。今天这里就总结一下

关于mouseover和mouseout冒泡问题的解决方案:  

首先,看下event.relatedTarget的用法。 

relatedTarget 

事件属性返回与事件的目标节点相关的节点。 

relatedTarget不支持IE。对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。 

对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。

 对于其他类型的事件来说,这个属性没有用。

<div id='but_temp'><a href='#'>



这里是文字



</a>   



    <div>



第二方收复失地还



 <br>sdfsjdlfsdjlfksdjlfksjdflk   



    <br>   



    <div>



第三层第三层第三层第三层第三层第三层



<br>   



    



第三层第三层第三层第三层第三层第三层第三层



</div>   



    <br>   



    </div>   



</div>
 var d1 = document.getElementById('but_temp');   



        d1.onmouseover = mouseover_x    



        d1.onmouseout = mouseout_x    



        function mouseover_x ( ae ){   



            var e = window.event || ae    



            var s = e.fromElement || e.relatedTarget    



            if( document.all ){   



                if(  !(s == this || this.contains(s))  ){   



                    alert("IE: 你in 了!");   



                }   



            }else{   



                var res= this.compareDocumentPosition(s)       



                if(  !(s == this || res == 20 || res == 0 )  ){   



                    alert("FF: 你in 了 !");   



                }   



            }   



        }   



   



        function mouseout_x( ae ){    

            var e = window.event || ae;   



            var s = e.toElement || e.relatedTarget;      



            //var temp = document.getElementById('but_temp');      



            if(document.all){      



                if( !this.contains(s) ){      



                    alert('IE: 你out 了');      



                }      



            }else{      



                var res= this.compareDocumentPosition(s)         



                if( ! ( res == 20 || res == 0) ){         



                    alert('FF: 你out 了');      



                }        



            }     



        }  

今天发现JQ中关于这个问题,已经有了一个好的解决办法了.呵呵,jquery中定义了一种事件叫做"mouseleave",用这个事件做事件句柄的话,就可以解决这个问题了.越来越发现jquery是个好东西了. 方案三:

<!DOCTYPE html>

<html>

<head>

    <title>无标题页</title>



    <script type="text/javascript" src="http://sy.zgsapt.com/js/jquery-1.7.2.min.js"></script>



    <script type="text/javascript">

        $(document).ready(function() {

            $("#numd").bind("mouseleave", function() {

                document.getElementById('keybored').style.display = 'none';

                document.getElementById('Nm').blur();

            });



            $("#Nm").focus(function() {

                document.getElementById('keybored').style.display = '';

            });



        });

    </script>



</head>

<body>

    <ul>

        <li>

            <input />

            <div>

            </div>

        </li>

    </ul>

    <input id="hid" type="text" value="" style="display: none" />

    <span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">

        <input type="text" id="Nm" name="Nm" value="" />

        <div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"

            id="keybored">

            <input type="button" value="1" onclick="document.getElementById('Nm').value+=this.value;" />

        </div>

    </span>

</body>

</html>

onmouseout,mouseover经过子元素也触发的问题解决方案

实现这种效果很简单了

 

你可能感兴趣的:(mouseover)