一个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的烦恼的更多相关文章

  1. 关于onmouseover和onmouseout的bug

    总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...

  2. onmouseover和onmouseout的那些事

    这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...

  3. JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...

  4. 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup

    一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...

  5. JS:onmouseover 、onmouseout

    鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...

  6. 【try..catch..】【判断输入是否为空】【onchange事件】【onmouseover和onmouseout事件】【onmousedown和onmouseup事件】

    1.try..catch.. <body><script>function myFunction(){try{ var x=document.getElementById(&q ...

  7. Repeater控件添加onmouseover和onmouseout事件

    网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控 ...

  8. onmouseover和onmouseout的bug

    脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmous ...

  9. HTML事件(onclick、onmouseover、onmouseout、this)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览

    1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...

  2. load和ready

    <一>ready和load ready先执行,load后执行 DOM文档加载的步骤: () 解析HTML结构. () 加载外部脚本和样式表文件. () 解析并执行脚本代码. () 构造HT ...

  3. IOS UIActionSheet的使用方法

    在IOS的用户接口向导中,苹果提供了另外一种显示警告框的手法,叫做UIActionSheet.它和UIAlertView比起来不会显得过于急切和紧张.而是很温和地在继续流程之前给用户提供了诸多选择. ...

  4. socket 通信 入门3 android 客户端 C# 服务端

    这是一个android端操控服务器的例子  就是发送简单指令到服务器  然后服务器响应什么的... 当然这里是未完成的  只是简单展示一下大致思路 首先连接建立起来后  服务端给客户端一条信息  告诉 ...

  5. Maven本地

    <localRepository></localRepository>

  6. XML中SystemID和PublicID的区别

    http://hi.baidu.com/binboot007/item/1533f91d52113d7c7b5f259c http://supportweb.cs.bham.ac.uk/documen ...

  7. 用户管理_组管理_设置主机名_UGO_文件高级权限_ACL权限

    用户管理: 添加用户:useradd tom 设置密码:passwd tom 切换账户: su - tom (不加-也能切换,但是 -会有两点不同 1.有-会切换到该用户的主目录  2.会切换到该用户 ...

  8. Boyer–Moore (BM)字符串搜索算法

    在计算机科学里,Boyer-Moore字符串搜索算法是一种非常高效的字符串搜索算法.它由Bob Boyer和J Strother Moore设计于1977年.此算法仅对搜索目标字符串(关键字)进行预处 ...

  9. Cocos2d—X游戏开发之VS2010 控制台输出中文,模拟器中文乱码问题解决

    首先,先解决第一个问题,我们使用VS2010开发的时候,调试的时候,中文打印出来都是乱码,这个问题很纠结. 如下图: CCLOG("cclog: 测试使用标签的自动换行和个别字体大写&quo ...

  10. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...