首页 > 蚂蚁部落 > 正文

防止鼠标移出移入子元素触发mouseout和mouseover事件
2017-12-27 09:19:49   来源:   评论:0 点击:

关于mouseout和mouseover事件这里就不多介绍了,具体可以参阅javascript的mouseout和mouseover事件详解一章节。这两个事件有一个共同特点,

关于mouseout和mouseover事件这里就不多介绍了,具体可以参阅javascript的mouseout和mouseover事件详解一章节。 

这两个事件有一个共同特点,那就是当鼠标移入或者移出子元素的时候都会触发对应的事件,这个往往在实际应用中是不需要的,或者说能够带来很大的困扰,下面就通过实例代码介绍一下如何避免此影响。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#box{  width:200px;  height:200px;  background-color:red;  padding:50px;}#inner{  width:50px;  height:50px;  background-color:blue;}</style><script type="text/javascript"> function isMouseLeaveOrEnter(e, handler) {      var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;      while (reltg && reltg != handler){     reltg = reltg.parentNode;   }         return (reltg != handler);    } window.onload=function(){  var box=document.getElementById("box");  var num=document.getElementById("num");  var count=0;  box.onmouseout=function(ev){    var ev=ev||window.event;    if(!isMouseLeaveOrEnter(ev,box)){      return false;    }    num.innerHTML=count++;  }}</script></head><body><div id="box">  <div id="inner"></div></div><div>事件触发了<span id="num"></span>次</div></body></html>

以上代码实现了我们的要求,可以消除鼠标指针移入或者移出子元素所带来的困扰,虽然例子只是mouseout事件的,对于mouseover事件也是如此,下面就介绍一下此代码的实现过程:

一.实现原理:

当触发这个事件的时候,事件对象都会有一个relatedTarget属性(标准浏览器支持,IE8和IE8以下浏览器需要使用其他属性返回),它能够返回一个与事件目标节点相关的节点,如果返回的节点都是注册事件的对象的子孙元素,说明是我们将要消除的事件触发,所以只要判断如果relatedTarget返回的节点是子孙节点,就进行特殊的处理就可以了,具体可以参阅代码注释。

二.代码注释:

1.function isMouseLeaveOrEnter(e, handler) {},此函数是功能的核心,可以返回一个布尔值用来标识relatedTarget属性返回的是否是子孙节点,如果返回true说明不是子孙节点,如果是false则说明是子孙节点。第一个参数是事件对象,第二个是注册事件处理函数的对象。

2.var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement,返回事件关联对象,相关属性可以参阅相关阅读。

3.while (reltg && reltg != handler){reltg = reltg.parentNode},一个while循环,条件是:如果reltg存在并且不是当前注册事件的节点,如果条件不被满足,那么将获取reltg的父节点然后再赋值给reltg,如此循环往复。这个语句的作用是判断相关元素是否值子孙元素,如果是的话,总会有一个reltg.parentNode会和handler相同。

4.return (reltg != handler),返回一个布尔值,如果相同就返回false,如果不相同就返回true。

三.相关阅读:

1.relatedTarget属性可以参阅javascript relatedTarget事件属性一章节。 

2.e.type属性可以参阅javascript type事件属性一章节。 

3.parentNode可以参阅JavaScript parentNode 属性一章节。 

相关热词搜索:

上一篇:js判断一个元素是否获得焦点
下一篇:动态修改input元素type属性值

分享到: 收藏
评论排行