onMouseEnter、onMouseLeave、onMouseOver、onMouseOut冒泡事件

43 阅读 0 评论 29 点赞

我是靠谱客的博主重要烤鸡，最近开发中收集的这篇文章主要介绍onMouseEnter、onMouseLeave、onMouseOver、onMouseOut冒泡事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

转自：http://www.haogongju.net/art/1085769

js冒泡事件的产生: 当鼠标移动到div区域内的table、img、a等元素时触法div本身的onmouseout事件. 由于鼠标停留在div标签内部元素上,触发div的onmouseout事件肯定不是我们想要的结果,于是便产生了冒泡事件.

js冒泡事件的解决方法: 当然网上解决的方法有很多,大多代码伸长,不容易理解. 而我们讲的代码非常简短,确容易理解.

原理就是:当触发div的onmouseout事件时,判断触法事件的元素是不是div的子元素,如果是则中断执行即可.

核心代码用到一个contains方法。如果A元素包含B元素，则返回true，否则false。

IE: event.toElement ; // 这个方法用来返回IE下触法事件的元素

非IE: event.relatedTarget; // 这个方法用来返回非IE下触法事件的元素

代码如下:
<div onmouseout="hiddenObj(event,this);"> <a href=#>冒泡事件超链接</a> </div>
<script type="text/javascript" >
function hiddenObj(theEvent,obj){ //theEvent用来传入事件，Firefox的方式
var browser=navigator.userAgent;
//取得浏览器属性
if (browser.indexOf("MSIE")>0){ //如果是IE
if (obj.contains(event.toElement)) return; // 如果是子元素则结束函数
}else{ //如果是Firefox
　　
if (obj.contains(theEvent.relatedTarget)) return; // 如果是子元素则结束函数
}
/*要执行的操作*/
obj.style.display='none';
}
</script>

话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。

为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：

当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。

这可不是我想要的，那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢？

这里列举两种方法：

一. setTimeout

因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。

具体的执行过程请看下图（纵向的虚线表示时间）：

这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。

二.contains

在onmouseover时先进行如下判断，结果为true时再执行方法体：

1 $("#popFormDiv").mouseover(function () {
2 var s = event.fromElement || event.relatedTarget;
3 if (!this.contains(s)) { $(this).show("slow"); }
4 });
在onmouseout时先进行如下判断，结果为true时再执行方法体：
$("#popFormDiv").mouseout(function () {
var s = event.toElement || event.relatedTarget;
if (!this.contains(s)) { $(this).hide("slow"); }
});

下面来解释一下上面两行代码的含义：

在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。

event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。

那么上面两行代码的含义就分别是：

○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；

○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；

这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。

但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：

1 if (typeof (HTMLElement) != "undefined") {
2
3 HTMLElement.prototype.contains = function (obj) {
4
5 while (obj != null && typeof (obj.tagName) != "undefined") {
6
7 if (obj == this)
8
9 return true;
10
11 obj = obj.parentNode;
12
13 }
14
15 return false;
16
17 };
18
19 }