我很难让jQuery
特殊事件hoverintent
与mouseleave
函数一起使用。(我也尝试过mouseout
替换mouseleave
)
我需要使用相同的功能,以便mouseleave
仅在用户的鼠标速度低于灵敏度阈值时触发事件。
我已经包含了下面的脚本,并且还上传了一个工作示例到http://click2fit.com/test_files/accordion_hoverintent.html
$(function () {
$(".accordion_close_leave").accordion({
event: "click hoverintent",
collapsible: true,
active: false,
autoHeight: false,
}).mouseleave(function() {
$(this).accordion({ active: false});
});
var cfg = ($.hoverintent = {
sensitivity: 100,
interval: 500
});
$.event.special.hoverintent = {
setup: function() {
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
},
teardown: function() {
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
},
handler: function( event ) {
var that = this,
args = arguments,
target = $( event.target ),
cX, cY, pX, pY;
function track( event ) {
cX = event.pageX;
cY = event.pageY;
};
pX = event.pageX;
pY = event.pageY;
function clear() {
target
.unbind( "mousemove", track )
.unbind( "mouseout", arguments.callee );
clearTimeout( timeout );
}
function handler() {
if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
clear();
event.type = "hoverintent";
event.originalEvent = {};
jQuery.event.handle.apply( that, args );
} else {
pX = cX;
pY = cY;
timeout = setTimeout( handler, cfg.interval );
}
}
var timeout = setTimeout( handler, cfg.interval );
target.mousemove( track ).mouseout( clear );
return true;
}
};