在 jQuery mouseleave 的这个页面提到了 mouseleave 与 mouseout的区别
http://api.jquery.com/mouseleave/
其主要的区别是事件冒泡的方式。mouseleave是不冒泡的,而mouseout则相反。
举例:
<ul style=”padding: 50px”><li></li><li></li></ul>
现在给上面的 HTML 结构绑定事件:
$(‘ul’).mouseleave(function(){
window.console && console.log(this);
})
你的原计划是当鼠标离开ul之后,控制台打出一些东西
可是,你会心碎的发现,当 鼠标从 ul 的 padding 区域移动到 ul 内部 的 li 上面的时候,mouseleave 事件竟然被触发了!呵呵,这是因为mouseleave不冒泡的原因哦。
将此例修改成为如下即可:
$(‘ul’).mouseout(function(){
window.console && console.log(this);
})
要注意的是:一般情况下,我们都会优先使用 mouseleave, 而不是mouseout, 我这个例子是特例了。