我在body上有一个委托,等待mouseover和mouseout上的类缩略图元素
$('body').delegate('.thumbnail', 'mouseover mouseout', function(e){
if(e.type=='mouseover' && !isMousingOver ){
enlarge_thumbnail(this);
isMousingOver = true;
console.log('enlarged')
}else if(e.type=='mouseout'){
reset_thumbnail(this);
isMousingOver = false;
console.log('resetting')
}
})
但每当我在div.thumbnail元素的边界内移动鼠标时,我都会进入日志 放大 复位 放大 复位 放大 复位 放大 复位 ...
其中enlarge_thumbnail和reset_thumbnail是:
function enlarge_thumbnail(element_to_set, how_much) {
element_to_set = $(element_to_set); // jQueryize the element;
how_much = parseInt(how_much);// Make sure it's an intger;
if( element_to_set.length && !isNaN(how_much) ){
element_to_set.css({width:how_much});
}
}
function reset_thumbnail(element_to_reset) {
element_to_reset = $(element_to_reset); // jQueryize the element;
element_to_reset.css({width:'200px'});
}
如果我没有移动鼠标,并且鼠标在div.thumbnail元素的边界内静止不动,那么它就可以实现我的目的:放大缩略图而不是重置它。
可能是什么问题?
答案 0 :(得分:5)
这是因为按照设计,mouseover
和mouseout
会在您输入/离开.thumbnail
的后代时触发处理程序。
要避免这种情况,请改用mouseenter
和mouseleave
。这些事件不会冒泡,因此只有在进入/离开它们所绑定的.thumbnail
元素时才会触发。