如何在保持点击 n 秒后触发事件？ - jQuery/Javascript答案

【问题标题】：How to fire an event after n seconds of maintained click? - jQuery/Javascript如何在保持点击 n 秒后触发事件？ - jQuery/Javascript
【发布时间】：2012-02-21 02:22:44
【问题描述】：

我确定我不是第一个寻找这个的人，但我没有找到任何解决我的问题的方法..

我正在寻找一种在保持点击 3 秒后触发事件的方法。我尝试使用带有 mouseup/mousedown Jquery 事件的 javascript setInterval() 函数，但它不起作用。

有人有想法吗？

我有一个 div，我按住鼠标按钮 3 秒钟，就会触发一些东西。 3秒定时器每次都必须重新初始化。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

调用 setTimeout() 以在 3000 毫秒后执行您的操作，将来自 setTimeout() 的标识符存储到函数上方作用域的变量中。在元素的mouseup() 上，通过clearTimeout() 清除超时（如果存在）。

var divMouseDown;
$('#div-id').mousedown(function() {
  divMouseDown = setTimeout(function() {
     // Do timeout action...
  }, 3000);
});
$('#div-id').mouseup(function() {
  if (divMouseDown) {
    clearTimeout(divMouseDown);
  }
});

【讨论】：

哇，我的代码是一样的，但是我在 mouseup 事件中放置了“做超时动作”。谢谢！
只是一个小小的性能花絮：您可以链接事件处理程序以避免两次调用$('#div-id')。 }); $('#div-id').mouseup(function() { => }).mouseup(function() {
@Pier-alexandreBouchard 所以这段代码真的像你期望的那样工作吗？太好了。
@BenLee 我倾向于不以那种方式思考 jQuery。实际上，我将初始代码从直接 JS 更改为使用 jQuery。
@Pier-alexandreBouchard，哈哈，我最初在我发布的答案中犯了与您完全相同的错误（在评论者向我指出后我修复了它）。

【解决方案2】：

在鼠标按下时，将超时设置为未来 3 秒。

鼠标抬起时，清除超时。

【讨论】：

【解决方案3】：

$('#div').on('mousedown', function(){
    mousetimer.down();
}).on('mouseup', function(){
    mousetimer.cancel();
});

var mousetimer = {
    timer: null,
    timing: false,
    down: function(){
        if(!timing)
        {
            mousetimer.timing = true;
            mousetimer.timer = setTimeout(function(){
                mousetimer.trigger();
            }, 3000);
        }
    },
    trigger: function(){
        alert('do something');
        mousetimer.cancel();
    },
    cancel: function(){
        mousetimer.timing = false;
        clearTimeout(mousetimer.timer);
    }
};

【讨论】：

是的，我只知道这会收到很多答案，所以我给出了一个详细的示例，因此如果您想这样做，也可以在侦听器之外调用这些函数。

【解决方案4】：

似乎mouseup/mousedown 事件和setTimeout/clearTimeout 是这样做的方式：

var timer = null;

$(selector).on('mousedown', function(ev) {
    timer = setTimeout(function() {
        timer = null;

        /* Do something */
    }, 3000);
}.on('mouseup', function(ev) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
});

【讨论】：

答案不需要触发 mouseup 事件。这是按住鼠标的人。
看来你应该交换mouseup和mousedown关键字

【解决方案5】：

使用 3000 毫秒的超时。

在鼠标按下事件上设置超时，在鼠标按下事件上清除它。

http://jsfiddle.net/kHMWX/

【讨论】：