如何在HTML按钮上设置短延迟后触发点击事件？

Question

有一种名为“duell”的技术，用于网站的无障碍访问。它适用于只能移动设备（例如鼠标）的人，并且其工作原理如下。当悬停效果持续时间超过1秒时，触发点击功能。我想在我的HTML按钮元素中使用jQuery模拟此效果。

- topless

Answer 1

var timer = null;
$('button').hover(mouseIn, mouseOut);

function mouseIn() {
   timer = setTimeout(triggerClick, 3000);
}

function mouseOut() {
   clearTimeout(timer );
}

function triggerClick() {
  $('button').trigger('click');
}

这个解决方案使用计时器。当你将鼠标悬停在元素上时启动计时器，在你停止悬停时清除它。显然，这只适用于一个按钮，但你可以轻松地修改它以使所有按钮在你的页面上都可用。

- JohnP

Answer 2

(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）

- RoToRa

Answer 3

我编写了一个快速的jQuery插件来完成你所要求的功能。

源代码（和演示）在http://jsfiddle.net/raybellis/tF833/。

这里是（当前）代码的参考：

(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);

- Alnitak

---

对于我的第一个插件来说还不错，尽管还有一些小问题 :) 为了得到额外的分数，超时时间应该是可配置的，并且在模拟点击发生时应该有视觉反馈。 - Alnitak