我已经实现了以下插件:
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
使用的数量:
- 为什么 hovercheck 功能使用这么多 CPU?
- 如何改进此功能?
更新:Internet Explorer 8(仅限 Windows XP)崩溃
在不同的浏览器中进行测试后,我还注意到 Internet Explorer 8 (Windows XP) 在hoverintent
触发事件后立即崩溃。这是(Internet Explorer)配置文件的另一个打印屏幕。(有趣的部分可能是querySelectAll()
DOM 函数)
- 任何想法为什么 Internet Explorer 8 崩溃?
- 解决方案?