来自 计算机网络 2019-09-13 19:53 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

onmouseover和onmouseout的局地难点惦记

一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。
图片 1 
很简单的逻辑,那也是大家想要的!但紧接着烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会容许触发onmouseover或onmouseout。
图片 2 
在上海教室中,对于'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事件中指向鼠标去往的非常成分

您恐怕感兴趣的作品:

  • js 阻止子成分响应父成分的onmouseout事件具体完成
  • 由此onmouseover选项卡落成img图片的改换
  • JS小成效(onmouseover完毕选拔月份)实例代码
  • js ondocumentready onmouseover onclick onmouseout 样式
  • 包容ie和firefox的鼠标经过(onmouseover和onmouseout)达成--简短版
  • js下关于onmouseout、事件冒泡的难题经验总计
  • onmouseover事件和onmouseout事件周详通晓

本文由六合联盟网发布于计算机网络,转载请注明出处:onmouseover和onmouseout的局地难点惦记

关键词: