onmouseover和onmouseout的一些问题思考


Posted in Javascript onAugust 14, 2013

一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。
onmouseover和onmouseout的一些问题思考 
很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout。
onmouseover和onmouseout的一些问题思考 
在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件;接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouseout(先)和onmouseover(后)事件。

由此可见,如果HTML元素(‘A'层)内还有其他元素(‘B','C'层),当我们移动到这些内部的元素时就会触发最外层(‘A'层)的onmouseout和onmouseover事件。

这两个事件的触发表现真的就是你想要的吗?也许你需要一个只在移进时才触发的,一个只在移出时才触发的事件,不管其内部是否还有其他元素….

解决方案

在IE下确实有你需要的两个这样事件:onmouseenter 和 onmouseleave。但很不幸FF等其他浏览器并不支持,只好模拟实现:

document.getElementById('...').onmouseover = function(e){ 
if( !e ) e = window.event; 
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement; 
while( reltg && reltg != this ) reltg = reltg.parentNode; 
if( reltg != this ){ 
// 这里可以编写 onmouseenter 事件的处理代码 
} 
} 
document.getElementById('...').onmouseout = function(e){ 
if( !e ) e = window.event; 
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement; 
while( reltg && reltg != this ) reltg = reltg.parentNode; 
if( reltg != this ){ 
// 这里可以编写 onmouseleave 事件的处理代码 
} 
}

备注:

W3C在mouseover和mouseout事件中添加了relatedTarget属性

•在mouseover事件中,它表示鼠标来自哪个元素
•在mouseout事件中,它指向鼠标去往的那个元素
而Microsoft在mouseover和mouseout事件中添加了两个属性

•fromElement,在mouseover事件中表示鼠标来自哪个元素
•toElement,在mouseout事件中指向鼠标去往的那个元素

Javascript 相关文章推荐
javascript计算用户打开网页的停留时间
Jan 09 Javascript
javascript实现在线客服效果
Jul 15 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
vue给对象动态添加属性和值的实例
Sep 09 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
js之onload事件的一点使用心得
Aug 14 #Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 #Javascript
JavaScript中json使用自己总结
Aug 13 #Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 #Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 #Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 #Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 #Javascript
You might like
php url路由入门实例
2014/04/23 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
Javascript 中的 && 和 || 使用小结
2010/04/25 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
17个Python小技巧分享
2015/01/23 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
年终考核实施方案
2014/05/26 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
入党函调证明材料
2014/12/24 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
gateway网关接口请求的校验方式
2021/07/15 Java/Android
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android
python 镜像环境搭建总结
2022/09/23 Python