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

【问题标题】：Trigger different events based on how long mouse is held down根据鼠标按下的时间触发不同的事件
【发布时间】：2016-04-03 23:49:06
【问题描述】：

我想根据鼠标按下的时间触发不同的事件。如果鼠标被按住少于第二个触发事件 1. 如果它被按住第二个触发事件 2. 如果它被按住 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 是个小提琴。

【问题讨论】：

只是想知道。我不认为这对大多数网页上的人来说是一个直观的操作。他们在使用您的网站时会知道此功能吗？我想知道您通过实现定时 mousedown/up 类型的功能来解决的真正问题是什么？我猜想如果人们不知道后果（如果不明显的话）不小心延迟了鼠标操作，这实际上会让人们感到沮丧。不过只是我的看法。想想触发事件 2 会有多难。
它不是真正的传统网页。我正在使用网络音频 api 制作步进音序器。按下按钮的长度旨在确定添加到序列中的音符的长度。

标签： javascript jquery

【解决方案1】：

我会这样做：

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

【讨论】：