根据鼠标按下的时间触发不同的事件

时间:2016-04-03 23:49:07

标签: javascript jquery

我想根据按住鼠标的时间来触发不同的事件。如果鼠标保持小于第二个触发事件1.如果按住第二个触发事件2.如果按住两秒钟触发事件3等等

我有这个JavaScript显示消息显示鼠标按下多长时间,但是如果用户继续按住鼠标两秒钟,我不确定如何在一秒钟后阻止显示的消息,

var mousedown = false;
var mousedown_timer = '';
$('#button').mousedown(function(e) {
  mousedown = true;
  $('#log').text('mousedown...');
  mousedown_timer = setTimeout(function () {
      if(mousedown) {
        $('#log').text('1 second');
      }
  }, 1000);
  mousedown_timer = setTimeout(function () {
    if(mousedown) {
        $('#log').text('2 second');
    }
  }, 2000);
}).mouseup(function(e) {
mousedown = false;
clearTimeout(mousedown_timer);
$('#log').text('aborted');
});

有没有办法可以移动我的计时器来检测mouseup函数中经过的时间?

Here是一个小提琴。

1 个答案:

答案 0 :(得分:4)

我将如何做到这一点:

var mousedownTimestamp;
$('#button').mousedown(function(e) {
  mousedownTimestamp = new Date();
}).mouseup(function(e) {
  var mouseupTimestamp = new Date();
  var difference = mouseupTimestamp - mousedownTimestamp;
  if (difference < 1000) {
     // event 1
  } else if (difference >= 1000 && difference < 2000) {
     // event 2
  } else if (difference >= 2000) {
     // event 3
  }
});