onmouseover和onmouseout的烦恼
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。
非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进时才触发,onmouseout也不会仅仅在移出时才触发!鼠标在DIV里面移动时也会可能触发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事件中指向鼠标去往的那个元素
onmouseover和onmouseout的烦恼的更多相关文章
- 关于onmouseover和onmouseout的bug
总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...
- onmouseover和onmouseout的那些事
这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...
- JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系
hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...
- 使用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控 ...
- onmouseover和onmouseout的bug
脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmous ...
- HTML事件(onclick、onmouseover、onmouseout、this)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览
1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...
- load和ready
<一>ready和load ready先执行,load后执行 DOM文档加载的步骤: () 解析HTML结构. () 加载外部脚本和样式表文件. () 解析并执行脚本代码. () 构造HT ...
- IOS UIActionSheet的使用方法
在IOS的用户接口向导中,苹果提供了另外一种显示警告框的手法,叫做UIActionSheet.它和UIAlertView比起来不会显得过于急切和紧张.而是很温和地在继续流程之前给用户提供了诸多选择. ...
- socket 通信 入门3 android 客户端 C# 服务端
这是一个android端操控服务器的例子 就是发送简单指令到服务器 然后服务器响应什么的... 当然这里是未完成的 只是简单展示一下大致思路 首先连接建立起来后 服务端给客户端一条信息 告诉 ...
- Maven本地
<localRepository></localRepository>
- XML中SystemID和PublicID的区别
http://hi.baidu.com/binboot007/item/1533f91d52113d7c7b5f259c http://supportweb.cs.bham.ac.uk/documen ...
- 用户管理_组管理_设置主机名_UGO_文件高级权限_ACL权限
用户管理: 添加用户:useradd tom 设置密码:passwd tom 切换账户: su - tom (不加-也能切换,但是 -会有两点不同 1.有-会切换到该用户的主目录 2.会切换到该用户 ...
- Boyer–Moore (BM)字符串搜索算法
在计算机科学里,Boyer-Moore字符串搜索算法是一种非常高效的字符串搜索算法.它由Bob Boyer和J Strother Moore设计于1977年.此算法仅对搜索目标字符串(关键字)进行预处 ...
- Cocos2d—X游戏开发之VS2010 控制台输出中文,模拟器中文乱码问题解决
首先,先解决第一个问题,我们使用VS2010开发的时候,调试的时候,中文打印出来都是乱码,这个问题很纠结. 如下图: CCLOG("cclog: 测试使用标签的自动换行和个别字体大写&quo ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...