鸦杀's Blog

鼠标移动事件

2016-07-15

鼠标移入相关的事件有:
mouseover:冒泡
mouseenter:不冒泡
mouseover是在鼠标穿过目标元素或其子元素都会触发,而mouseenter是在鼠标穿过目标元素才会触发。

鼠标移出相关的事件有:
mouseout:冒泡
mouseleave:不冒泡
mouseout是在鼠标离开目标元素或其子元素都会触发,而mouseleave是在鼠标离开目标元素时才会触发。

这里需要讲一下当一个dom事件被触发时,它需要经历的三个阶段:

  • 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象;
  • 目标阶段:到达目标事件位置(事发地),触发事件;
  • 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。

看一个例子

代码如下:

我们看到鼠标移入移出内部元素,都会触发外部元素的mouseout,移入时触发很正常,虽然我们很多时候的需求并不是这样。而移出时触发是因为内部元素的mouseout冒泡到外部元素。

看这张图片,鼠标从内部元素移动外部元素,此时它的event对象是这样的:

event对象

我们通过为内部元素添加mouseout事件,取消冒泡,来解决。。。

1
2
3
document.querySelectorAll('.inner')[0].addEventListener('mouseout',function(e){  
this.textContent = (++j);
e.stopPropagation();},false);

然而,it is not enough !! 很多时候我们不希望鼠标在移入到内部元素中,也触发mouseout,IE中有mouseenter事件,而标准没有。我们可以利用relatedTarget去实现:

1
2
3
4
5
//e.relatedTarget===this,从内部元素移动到外部元素时,不计数  
//this.contains(e.relatedTarget)包含关系
if(e.relatedTarget===this ||this.contains(e.relatedTarget)){
return false;
}

这样,就解决了在鼠标在内部元素来回移动时触发外部元素mouseout的问题了。

演示:

完整代码如下:

扫描二维码,分享此文章