jQuery中的mouseenter和mouseleave事件
Query有mouseenter和mouseleave事件,大家知道事件的冒泡特性,对于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 同样无此问题。
$(document).ready(function(){
$("#sel-down-w").mousemove(function(){
$(".sns-setting-box").slideDown().mouseleave(function(){ $(this).slideUp(1500); }); });
$("#sns-func a").click(function(){ alert('你点击了 '+$(this).text()); });
});
Query有mouseenter和mouseleave事件,大家知道事件的冒泡特性,对于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 同样无此问题。
$(document).ready(function(){
$("#sel-down-w").mousemove(function(){
$(".sns-setting-box").slideDown().mouseleave(function(){ $(this).slideUp(1500); }); });
$("#sns-func a").click(function(){ alert('你点击了 '+$(this).text()); });
});
89朵
0个