jQuery中如何使用mouseout和mouseleave?

日期：2011/11/28  来源：GBin1.com

 

jQuery中的鼠标事件中有mouseout和mouseleave俩个看起来类似的事件。

 

这俩个事件的使用有些区别，如下是jQuery文档中的官方解析：

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

以上定义中指出，mouseout如果应用在镶套的元素中，当鼠标离开里面的元素将会触发这个事件。而使用mouseleave的时候，只有鼠标离开外面的元素才会触发mouseleave事件。

这种情况经常出现在处理ul及其镶套的li的代码中，当我们要执行鼠标移出ul元素的时候，有的朋友可能会使用mouseout，这个时候其实在鼠标移出li元素的时候就会触发，因此我们需要使用mouseleave方法，演示如下：

 

在线演示  在线调试

 

原文来自：jQuery中如何使用mouseout和mouseleave?