onmouseout 和 onmouseleave 有何区别？

54 阅读 0 评论 36 点赞

我是靠谱客的博主精明外套，最近开发中收集的这篇文章主要介绍onmouseout 和 onmouseleave 有何区别？，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

比如：在一个<td>标签有一个<a>标签

1.由于<a>标签是<td>标签的子标签。所以根据事件冒泡的原理，<a>标签上的onMouseOut和onMouseOver事件会被传递到<td>标签上。

2.对于onMouseOut和onMouseOver事件，浏览器会把<a>和<td>看做两个不同的object。从而当鼠标在两者之间移动时，会激发这两个事件。

3.而且在浏览器中有一个很有意思的特性，带有连接的文字是空心的。就是说当鼠标点没有定位在文字曲线上时，浏览器认为它是定位在该文字下面的object上的。（比如说你的鼠标是定位在123的1和2之间，而不定位在1上或2上时，相当于定位在<td>上。）

4.而onMouseEnter和onMouseLeave事件就把<a>和<td>都看成是鼠标在一个对象(<td>)上了，

看下边的例子，把鼠标移到123上

<table><tr> <td onMouseOut="alert('onMouseOut')" bgcolor="#9999FF"> ------------------------------------------<br> hhhhhhhhhhhh <a href="#">123</a> ggggggggggg<br> ------------------------------------------<br> </td></tr></table>用 onMouseLeave 
<table><tr> <td onMouseLeave="alert('onMouseLeave')" bgcolor="#9999FF"> ------------------------------------------<br> hhhhhhhhhhhh <a href="#">123</a> ggggggggggg<br> ------------------------------------------<br> </td></tr></table>