每周总结
•发布于   •作者 简单生活  •237 次浏览  •来自 资讯

      又过了一周,学习了俩周的js,还有几天js就要学完了,在这一周里,我学到了一些觉得很炫的东西,当然这些也只是一些基础罢了,通过这一周的学习,我更加明白js是干嘛的了,更了解它的用途,更熟练它的应用,当然因为js还没有学完,在做项目的过程中就会遇到困难,比如这次做的途牛中,我再用onmouseover与onmouseout的时候,就出现了bug,我自认为逻辑是通的,但是还是没有做好,我就只能求助度娘了。在这里和大家分享一下,这个bug究竟是怎么回事。

    在Javascript中,父元素包含子元素,当给父元素设置onmouseover或onmouseout事件时,鼠标从父级移入子级的时候会多次触发onmouseover事件;鼠标从子级移入父级后再次移出的时候也会多次触发onmouseout事件。所以这个问题要解决,不然在以后的事例中出现很大的问题。

下面我们首先要熟悉几个对象与方法:

1)事件对象:

2)事件对象相关属性(只针对onmouseover与onmouseout):

  标签源:oEvent.fromElement(从哪里来的元素):兼容IE,Chrome

      oEvent.toElement(去哪里的元素):兼容IE,Chrome

      oEvent.relateTarget(相关元素):兼容FF 

3)判断一个元素是不是包含在另一个元素中的方法:元素.contains(Node)   

了解了上面的方法后,开始解决上面的问题:当onmouseover时,鼠标移过父级元素的时候,不会有任何的问题,当从父级移入子级的时候就会出现问题;同样当onmouseout时,鼠标从父级移出的时候也没有问题,但从子级往父级移动的时候就会多次触发onmouseout事件,我们解决的方法就是设置当从父级移入子级的时候或是从子级往父级移动的时候这个事件无效。

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>onmouseover的bug</title><style>

div{ width:200px; height:200px; background:#ccc; margin:40px auto; }

h3{ height:30px; background:yellow; }</style><script>

    window.onload=function(){

        var oDiv=document.getElementsByTagName('div')[0];

            oDiv.onmouseover=function(ev){

                var oEvent=ev||event;

                var oFrom=oEvent.fromElement||oEvent.relatedTarget;

                //其中oEvent.fromElement兼容IE,chrome

                //oEvent.relatedTarget;兼容FF。

                if(this.contains(oFrom)) return; //判断div是不是包含oFrom,如果包含就返回                alert('移入了');

            };

    };</script></head>

<body>

    <div>

        <h3></h3>

    </div></body>

 

同样的鼠标移出事件onmouseout时,可以写成下面这种:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>onmouseout的bug</title><style>

div{ width:200px; height:200px; background:#ccc; margin:40px auto; }

h3{ height:30px; background:yellow; }</style><script>

    window.onload=function(){

        var oDiv=document.getElementsByTagName('div')[0];

            oDiv.onmouseout=function(ev){

                var oEvent=ev||event;

                var oTo=oEvent.toElement||oEvent.relatedTarget;

                //其中oEvent.toElement兼容IE,chrome

                //oEvent.relatedTarget;兼容FF。

                if(this.contains(oTo)) return; //判断div是不是包含oTo,如果包含就返回                alert('移出了');

            };

    };</script></head>

<body>

    <div>

        <h3></h3>

    </div></body>

其实我们还可以使用onmouseenter与onmouseleave事件来代替onmouseover与onmouseout事件,网上查了一下说onmouseenter与onmouseleave事件不稳定,而且有的时候只兼容IE内核的浏览器。

 

 


0 回复
回到顶部

©2017 Powered by 三十三行伪代码
皖ICP备17005175号-3