如何在维持点击n秒后触发事件？ – jQuery / Javascript

我相信我不是第一个寻找这个，但我没有找到解决问题的方法..

我正在寻找一种方法，只有在经过3秒的维持点击后才能发起事件。 我尝试使用带有mouseup / mousedown Jquery事件的javascript setInterval（）函数，但它没有用。

有人有想法吗？

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

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

Answer 2

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

在鼠标向上时，清除超时。

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

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

Answer 5

使用3000ms的超时。

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

http://jsfiddle.net/kHMWX/