DDR爱好者之家

onmouseover和onmouseout的一些问题思考
站长资源 2025/1/21 佚名
38 1538
DDR爱好者之家 Design By 杰米
一个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事件中指向鼠标去往的那个元素
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米