Question

有一种名为duell的技术，它用于网站的可访问性原因。它用于只能移动设备（即鼠标）的人，它就像这样工作。在悬停效果悬停持续时间超过1秒作为示例时，将触发单击功能。我想用我的HTML中的按钮元素jQuery来模拟它。

Answer 1

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

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

function mouseOut() {
   clearTimeout(timer );
}

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

此解决方案使用计时器。将鼠标悬停在元素上时启动计时器，并在停止悬停在元素上时将其清除。显然这仅适用于1个按钮，但您可以轻松修改它以适用于页面上的所有按钮。

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）

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

如何在HTML按钮中短暂延迟后触发点击？

3 个答案: