彰化一整天的論壇

 找回密碼
 立即註冊
查看: 781|回復: 0

jQuery中的mouseenter和mouseleave事件

[複製鏈接]
發表於 2013-8-29 15:56:00 | 顯示全部樓層 |閱讀模式

今天做一个下拉菜单的时候碰到了一个bug,用mouseout的时候,鼠标还没移出拉菜单就自动关闭了,
看案例:http://www.css88.com/demo/mouseleave/2.html

经过几番查阅发现了jQuery中还有mouseenter和mouseleave事件,这两个事件在手册中找不到,所以特地查阅了一番。

大家知道事件的冒泡特性,在上面的BUG中也正是因为这个冒泡特性,对于mouseover事件来说 ,当鼠标从其他元素 移动到 child节点时发生,但此事件会冒泡 所以会导致 parent 也出发mouseover。如果我们对 parent注册了 mouseover监听,从 parent移动到child 同样出发parent的mouseover 有时候我们不希望这样的事情发生。

对于 mouseover 和mouseenter 两个事件 最大的区别就是 mouseenter 是 不冒泡的事件,这时候 如果注册的监听 是mouseenter的话 无论鼠标从任何元素 移动到child时 只有child元素 发生mouseenter事件 而其祖宗节点 都不会因为冒泡 而触发此事件。

对于 mouseout 和mouseleave 也是如此 当鼠标从child 移出时 mouseout同样会冒泡到 parent 从而触发parent的 mouseout 二mouseleave 同样无此问题。

看demo:http://www.css88.com/demo/mouseleave/1.html

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《jQuery中的mouseenter和mouseleave事件


回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-10-18 16:50 , Processed in 0.117645 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表