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 相关文章推荐
javascript 获取select下拉列表值的代码
Sep 07 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
绩效专员岗位职责
2013/12/02 职场文书
个人自我剖析材料
2014/02/07 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
活动总结报告格式
2014/05/09 职场文书
民族学专业求职信
2014/07/28 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书