javascript中onmouse事件在div中失效问题的解决方法


Posted in Javascript onJanuary 09, 2012

也就是说,移到对象的子对象上,也算onmouseout了。但这往往会达不到我们想要的预期效果。这是由于javascript自身的冒泡特性导致的(即在子元素上触发了事件,并冒泡到了父元素-堆栈后进先出算法)。今天在网上搜了一下,找了以下的解决办法(兼容IE和Firefox)。
在IE下解决问题很简单,用onMouseEnter、onMouseLeave来代替onMouseOver、onMouseOut就行了,他们的作用基本相同,但前者不会发生冒泡(如果用 jQuery的event事件,只要绑定mouseleave、mouseenter即可)。但firefox下并没有onMouseEnter、onMouseLeave这两个事件。那么只能使用纯js来解决IE及Firefox的兼容性问题了:
原理:通过判断触发onMouseOut事件后,鼠标到达的元素是不是包含在父元素信息栏(div)内,如果是就表示鼠标还在信息栏(div)上,则不隐藏。如果否就表示鼠标真的移出了信息栏(div),那么信息栏就要隐藏。

// 首先来获取触发onMouseOut事件的元素,IE下通过event的toElement属性来获得,firefox下通过event的relatedTarget属性来获得。 
IE:event.toElement ,Firefox:event.relatedTarget(注意:Firefox下的event须通过在函数调用时传入,而IE下的event则可以直接通过window.event系统对象来获得) 
// ① 接下来就是判断获取的元素是否是主体div的子元素(IE下可以通过元素的obj.contains(element)方法来判断,但Firefox下没有这个方法,所以需要给firefox定义元素的obj.contains()方法)。 
代码如下: 
if(typeof(HTMLElement)!="undefined") // 给firefox定义contains()方法,IE已经系统自带有这个方法了 
{ 
HTMLElement.prototype.contains=function(obj) { 
while(obj!=null&&typeof(obj.tagName)!="undefind") { // 通过循环对比来判断是不是obj的父元素 

 if(obj==this) { return true; } 


 obj=obj.parentNode; 

 } 
return false; 
}; 
} 
// ② 获取和判断搞定后,我们就可以通过判断IE和Firefox来针对处理了,通过navigator.userAgent来判断浏览器类型: 
if(navigator.userAgent.indexOf("MSIE")>0) { 
return "MSIE"; 
} 
if(navigator.userAgent.indexOf("Firefox")>0){ 
return "Firefox"; 
} 
// ③ 到此为止所有要解决的问题都得到了解决,当触发onMouseOut事件时,我们将针对不同的浏览器先获取鼠标到达的元素,然后通过判断该元素是否在信息栏(div)内,如果元素是子元素,那么不执行onMouseOut事件,反之则执行事件,隐藏信息栏,完成后的代码如下: 
function hideMsgBox(theEvent){ //theEvent用来传入事件,Firefox的方式 
  if (theEvent){ 
  var browser=navigator.userAgent; //取得浏览器属性 
  if (browser.indexOf("Firefox")>0){ //如果是Firefox 

 if (document.getElementById('MsgBox').contains(theEvent.relatedTarget)) {//如果是子元素 

 return; //结束函数 
} 
} 
if (browser.indexOf("MSIE")>0){ //如果是IE 
if (document.getElementById('MsgBox').contains(event.toElement)) { //如果是子元素 
return; //结束函数 
} 
} 
} 
/*要执行的操作(如:隐藏)*/ 
document.getElementById('MsgBox').style.display='none' ; 
…… 
} 
// ④ 在信息栏(Div)上设置onMouseOut=hideMsgBox(event)来调用。

另外,通过设置window.event.cancelBubble = true (IE) ,event.stopPropagation() event.preventDefault() (Firefox) 也可以解决问题,但是需要遍历所有子元素,影响效率,所以还是在触发onMouseOut事件时再进行上述判断分别处理比较合适。
Javascript 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
jQuery 阴影插件代码分享
Jan 09 #Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 #Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 #Javascript
分享几个超级震憾的图片特效
Jan 08 #Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 #Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 #Javascript
人人网javascript面试题 可以提前实现下
Jan 05 #Javascript
You might like
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP goto语句用法实例
2019/08/06 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
常用的javascript设计模式
2017/01/11 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
优秀食品类广告词
2014/03/19 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server