有一种名为“duell”的技术,用于网站的无障碍访问。它适用于只能移动设备(例如鼠标)的人,并且其工作原理如下。当悬停效果持续时间超过1秒时,触发点击功能。我想在我的HTML按钮元素中使用jQuery模拟此效果。
var timer = null;
$('button').hover(mouseIn, mouseOut);
function mouseIn() {
timer = setTimeout(triggerClick, 3000);
}
function mouseOut() {
clearTimeout(timer );
}
function triggerClick() {
$('button').trigger('click');
}
这个解决方案使用计时器。当你将鼠标悬停在元素上时启动计时器,在你停止悬停时清除它。显然,这只适用于一个按钮,但你可以轻松地修改它以使所有按钮在你的页面上都可用。
(function() {
var clearTimeout = function(b) {
window.clearTimeout($(b).data("hoverTimer"));
}
$("button").hover(function() {
var button = $(this);
button.data("hoverTimer", window.setTimeout(function() {
button.trigger("click");
}, 1000));
}, function() {
clearTimeout(this)
}).click(function() {
clearTimeout(this)
});
})();
编辑以避免多次点击。(感谢Alnitak)
(function($) {
$.fn.duell = function() {
return this.each(function() {
var timer = null;
var el = this;
var stopTimer = function() {
if (timer) {
clearTimeout(timer);
timer = null;
}
};
var startTimer = function() {
stopTimer();
timer = setTimeout(function() {
$(el).click();
}, 1000);
};
// make sure other clicks turn off the timer too
$(el).click(stopTimer);
// handle mouseenter, mouseleave
$(el).hover(startTimer, stopTimer);
});
};
})(jQuery);