为什么鼠标还没完全移出就触发元素的mouseout事件

想知道这个原因,只需要清楚的明白一下几个jQuery事件:

例 :<div><span></span></div>


1.mouseover() : 如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

注:例div使用了mouseover 事件,鼠标在进入div到span再出去,会触发3次mouseover 事件;

2.mouseenter() : 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

注:div使用了mouseenter 事件,鼠标在进入div到span再出去,会触发1次mouseenter事件;

3.mouseout() : 如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。

注:例中div使用了mouseout  事件,鼠标在进入div到span再出去,会触发3次mouseout 事件;

4.mouseleave() : 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

注:div使用了mouseleave  事件,鼠标在进入div到span再出去,会触发1次mouseleave 事件;

所以它们的区别就是mouseover和mouseout拥有冒泡属性,将 mouseout() 换成 mouseleave() 即可!

发布了6 篇原创文章 · 获赞 4 · 访问量 2378

猜你喜欢

转载自blog.csdn.net/dahai_PHP/article/details/64919466
今日推荐