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实现仿Windows关机效果
Mar 10 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
php fread函数使用方法总结
2019/05/28 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JS delegate与live浅析
2013/12/21 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
详解vuex的简单使用
2018/03/12 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
Python接收手机短信的代码整理
2020/08/02 Python
python利用线程实现多任务
2020/09/18 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
车间主管岗位职责
2013/11/14 职场文书
银行演讲稿范文
2014/01/03 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
小学美术教学反思
2016/02/17 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python