我已经实现了以下插件:
jQuery.event.special.hoverintent = {
pxDelta: 7,
pxRate: 100,
bindType: "mouseover",
delegateType: "mouseover",
handle: function( event ) {
var args = Array.prototype.slice.call( arguments, 0 ),
target = jQuery( event.target ),
cfg = jQuery.event.special.hoverintent,
cX, cY, pX, pY, timer;
function clear() {
target
.off("mousemove", getpx )
.off("mouseout", clear );
clearTimeout( timer );
}
function getpx( e ) {
cX = e.pageX;
cY = e.pageY;
}
target
.on( "mousemove", getpx )
.on( "mouseout", clear );
(function hovercheck() {
if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.pxDelta) {
clear();
// Normally we'd need to reset this but it is async
event.type = "hoverintent";
return event.handleObj.handler.apply( event.target, args );
}
pX = cX;
pY = cY;
timer = setTimeout( hovercheck, cfg.pxRate );
})();
}
};
我这样称呼它:
$("#mainnav").find("ul.tabs > li > a").on("hoverintent", function(){ //... }
这是(Google Chrome开发工具)个人资料的打印屏幕,您可能会注意到hovercheck
功能使用的数量:
更新: Internet Explorer 8(仅限Windows XP)崩溃
在不同的浏览器中测试后,我也注意到一旦hoverintent
事件被触发,Internet Explorer 8(Windows XP)就会崩溃。
这是(Internet Explorer)配置文件的另一个打印屏幕。 (有趣的部分可能是querySelectAll()
DOM功能)
答案 0 :(得分:1)
问题不在于hovercheck功能。大部分时间都花在事件处理程序中。
$("#mainnav").find("ul.tabs > li > a").on("hoverintent", function() {
/* all the time is spent here, what is this code? */
/* try putting something simple here to see if the performance issue goes away */
console.log("in event handler!");
});