关于onmouseover和onmouseout的bug
总结了一下关于使用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,当鼠标从灰色移动到粉色区域,或者从粉色移动到灰色区域的时候,仍然会触发onmouseover和onmouseout 事件.
解决思路:判断来源,如果从盒子里面移动则不触发。
首先,要借助事件对象,对事件对象进行兼容处理:
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的更多相关文章
- onmouseover和onmouseout的bug
脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmous ...
- onmouseover和onmouseout的那些事
这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...
- JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系
hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...
- onmouseover和onmouseout的烦恼
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout. 非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进 ...
- 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup
一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...
- JS:onmouseover 、onmouseout
鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...
- 【try..catch..】【判断输入是否为空】【onchange事件】【onmouseover和onmouseout事件】【onmousedown和onmouseup事件】
1.try..catch.. <body><script>function myFunction(){try{ var x=document.getElementById(&q ...
- Repeater控件添加onmouseover和onmouseout事件
网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控 ...
- HTML事件(onclick、onmouseover、onmouseout、this)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Python 练习
1.有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1': ...
- Robot Framework:RF中对时间操作的datetime库常用关键字
[转自:http://blog.csdn.net/r455678/article/details/52993765] 1.对固定日期进行操作,增加或减去单位时间或者时间段 2.对两个时间段进行操作 3 ...
- java学习第14天(集合的框架和基本遍历)
今天主要是接触了集合的概念,集合简单意义上来说就是类对象的集合,我们一般用Collection 这个接口来表示,集合主要体系为: Collection |--List |--ArrayList |-- ...
- Android 打包
1.数字签名(指的是我们打包程序时所用keystore的SHA1指纹) 2.debug打包,不能在android 市场上架,使用的签名是默认的签名,1年后失效:release打包使用的是自己的签名,可 ...
- ubuntu软件推荐
本文推荐的ubuntu工具均为笔者亲用.原则:在精不在多. 0.万能类 笔者崇尚[极简主义],常用的工具如果有网页版的就尽量不用单独的client.如网页版微信. 1.系统类 截图:Deepin-sc ...
- 常用COBOL函数
本文来自(http://refer.it-manual.com/cobol.html) COBOL関数(JIS-COBOL規格標準)の一覧表を掲載しています. COBOL関数一覧表は.各項目での並べ替 ...
- php的数据循环 之li的3个类判断
这种判断必须得保证后台数据的键值为数字 ,反正要能跟数字计算的数据才行 ts2.php <?php$array = array('0'=>'a1','1'=>'b1','2'=> ...
- SHA1算法
public string SHA1_Hash(string str_sha1_in) { SHA1 sha1 = new SHA1CryptoServicePro ...
- 一种table超出高度自动出滚动条的解决方案
在日常的开发过程中,我们可能会遇到这样一种需求,在指定高度内显示table,超过高度时表格出滚动条. 让我们带着这个问题,一起来探讨吧! <!DOCTYPE html> <html ...
- python基础知识4——collection类——计数器,有序字典,默认字典,可命名元组,双向队列
1.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 Counter 我们从中挑选一些相对常用的方法来举例: 在上面的例子 ...