以下是hoverIntent点击延时jQuery插件的源码:
(function($) {
$.fn.hoverIntent = function(handlerIn, handlerOut, selector) { var instance = this; var timeoutId, hoverDelay = 200, hoverTimeout; var handleHover = function(e) { var currentTarget = selector ? $(e.currentTarget).find(selector) : $(e.currentTarget); clearTimeout(timeoutId); if (e.type === 'mouseenter') {
timeoutId = setTimeout(function() {
handlerIn.call(currentTarget, e);
}, hoverDelay);
} else {
timeoutId = setTimeout(function() {
handlerOut.call(currentTarget, e);
}, hoverDelay);
}
}; var handleMouseLeave = function(e) { clearTimeout(timeoutId); clearTimeout(hoverTimeout);
}; return instance.on('mouseenter.hoverIntent', handleHover)
.on('mouseleave.hoverIntent', handleHover)
.on('mouseleave.hoverIntent', handleMouseLeave);
};
})(jQuery);
这是一个hoverIntent点击延时jQuery插件的源码。它通过在元素上监听mouseenter
和mouseleave
事件来实现延时触发函数的效果。当鼠标进入元素时,会延时一段时间后执行handlerIn
函数;当鼠标离开元素时,也会延时一段时间后执行handlerOut
函数。