总结了一下关于使用onmouseover以及onmouseout会出现的bug

首先简单的布局:

<div id="box">
<div>这是一个内容</div>
</div>

简单写了一下样式,效果如下:

js代码如下:

var oBox = document.getElementById("box");
oBox.onmouseover = function(){
alert(“移入");
}
oBox.onmouseout = function(){
alert("移出");
}

需要的效果是移入时alert(“移入"),移出时alert("移出");

然而会产生一个bug,当鼠标从灰色移动到粉色区域,或者从粉色移动到灰色区域的时候,仍然会触发onmouseoveronmouseout 事件.

解决思路:判断来源,如果从盒子里面移动则不触发。

首先,要借助事件对象,对事件对象进行兼容处理:

var oEvent = ev || event;

事件对象中有一个属性fromElemen,获得来源,但是也存在兼容问题,只适用于高级浏览器,在chrome和ie里有relatedTarget属性

var oFrom = oEvent.fromElement || oEvent.relatedTarget

判断是是否在内部移动,是则直接return返回

//判断是否包含
if(oFrom && oBox.contains(oFrom)){
return;
}

最后js代码如下:

oBox.onmouseover = function(ev){
var oEvent = ev || event;//兼容处理
var oFrom = oEvent.fromElement || oEvent.relatedTarget;//兼容处理
//如果在里面则返回
if(oFrom && oBox.contains(oFrom)){
return;
}
alert("移入");
};

同理,onmoouseout的解决方法代码如下:

oBox.onmouseout = function(ev){
var oEvent = ev || event; //处理兼容
var oTo = oEvent.toElement || oEvent.relatedTarget; //处理兼容
//如果在里面则返回
if(oTo && oBox.contains(oTo)){
return;
}
alert("移出");
};

关于兼容问题,ev属于高级浏览器,event属于ie

relatedTarget属于高级浏览器,fromElement和toElement属于chrome和ie

最后介绍一种简便方法,onmouseenter事件和onmouseleave事件以及可以解决以上问题,使用方法相同。

关于onmouseover和onmouseout的bug的更多相关文章

  1. onmouseover和onmouseout的bug

    脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmous ...

  2. onmouseover和onmouseout的那些事

    这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...

  3. JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...

  4. onmouseover和onmouseout的烦恼

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.   非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进 ...

  5. 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup

    一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...

  6. JS:onmouseover 、onmouseout

    鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...

  7. 【try..catch..】【判断输入是否为空】【onchange事件】【onmouseover和onmouseout事件】【onmousedown和onmouseup事件】

    1.try..catch.. <body><script>function myFunction(){try{ var x=document.getElementById(&q ...

  8. Repeater控件添加onmouseover和onmouseout事件

    网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控 ...

  9. HTML事件(onclick、onmouseover、onmouseout、this)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python 练习

    1.有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1': ...

  2. Robot Framework:RF中对时间操作的datetime库常用关键字

    [转自:http://blog.csdn.net/r455678/article/details/52993765] 1.对固定日期进行操作,增加或减去单位时间或者时间段 2.对两个时间段进行操作 3 ...

  3. java学习第14天(集合的框架和基本遍历)

    今天主要是接触了集合的概念,集合简单意义上来说就是类对象的集合,我们一般用Collection 这个接口来表示,集合主要体系为: Collection |--List |--ArrayList |-- ...

  4. Android 打包

    1.数字签名(指的是我们打包程序时所用keystore的SHA1指纹) 2.debug打包,不能在android 市场上架,使用的签名是默认的签名,1年后失效:release打包使用的是自己的签名,可 ...

  5. ubuntu软件推荐

    本文推荐的ubuntu工具均为笔者亲用.原则:在精不在多. 0.万能类 笔者崇尚[极简主义],常用的工具如果有网页版的就尽量不用单独的client.如网页版微信. 1.系统类 截图:Deepin-sc ...

  6. 常用COBOL函数

    本文来自(http://refer.it-manual.com/cobol.html) COBOL関数(JIS-COBOL規格標準)の一覧表を掲載しています. COBOL関数一覧表は.各項目での並べ替 ...

  7. php的数据循环 之li的3个类判断

    这种判断必须得保证后台数据的键值为数字 ,反正要能跟数字计算的数据才行 ts2.php <?php$array = array('0'=>'a1','1'=>'b1','2'=> ...

  8. SHA1算法

    public string SHA1_Hash(string str_sha1_in)        {            SHA1 sha1 = new SHA1CryptoServicePro ...

  9. 一种table超出高度自动出滚动条的解决方案

    在日常的开发过程中,我们可能会遇到这样一种需求,在指定高度内显示table,超过高度时表格出滚动条. 让我们带着这个问题,一起来探讨吧! <!DOCTYPE html> <html ...

  10. python基础知识4——collection类——计数器,有序字典,默认字典,可命名元组,双向队列

    1.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能  Counter 我们从中挑选一些相对常用的方法来举例: 在上面的例子 ...