一个按钮具有两种不同的单击和鼠标按下行为答案

【问题标题】：Have one button with two different behaviors for click and mouse down一个按钮具有两种不同的单击和鼠标按下行为
【发布时间】：2021-10-02 23:23:21
【问题描述】：

我希望相同的按钮在 left 单击和 left 鼠标按下时表现不同。点击它应该给当前数字加 15，鼠标按下它加 1 直到鼠标按下

var value = 0;
document.getElementById("Addbtn").addEventListener("mousedown", mouseDown);
document.getElementById("Addbtn").addEventListener("click", mouseClick);

function mouseDown() {
  this.value++;
  document.getElementById("demo").innerHTML = this.value.tosSring();
}


function mouseClick() {
  this.value += 15;
  document.getElementById("demo").innerHTML = this.value.tosSring();
}

问题这两个事件都被触发了，我希望区分它们，这样当鼠标按住时点击不会触发，反之亦然。

有没有办法做到这一点？干杯

【问题讨论】：

mouseup 没有解决这里的问题？而不是点击我的意思是
@Shai nope - 在鼠标按下时释放鼠标也会触发鼠标向上 - 所以它会执行 +1 并且最后会添加另一个 15 :(
嗯，好的，所以你想避免鼠标点击，你可以在开始鼠标按下事件之前等待 1 或 2 秒吗？我的意思是，如果您可以在鼠标按下时进行 2 秒的超时，那么如果发生单击，请取消超时。这将导致 mouseDown 发生但什么也不做，除非用户按住鼠标超过 2 秒
重申@Shai 的问题——用户必须按住鼠标按钮多长时间才能将其视为“按住”而不是“点击”？
@shai 可以等待第二个最大值，然后开始在 mouse down 中添加 1，但不会超过这个时间。这是正确的方法吗？如果是的话你能分享一段代码吗

标签： javascript mouseevent

【解决方案1】：

正如我在评论中所说，由于 click 和 mousedown 是相关的，并且无法将它们彼此断开，因此解决方案可能会有点技巧，添加超时以确定是否被鼠标“长时间按住”。如果触发了鼠标按下，则添加了一些奖励以禁用单击，如果不需要，您可以将其删除。另请注意，它的等待时间为 1 秒（1000 毫秒），根据您在说出它的 mousedown 事件之前可以等待的时间来更改它。 1 秒有时对用户来说似乎很长（大约 500 毫秒对我来说是一个甜蜜点）

        var value = 0;
        var mouseHoldTimeout;
        var mouseDownDone = false;
        document.getElementById("Addbtn").addEventListener("mousedown", mouseDown);
        document.getElementById("Addbtn").addEventListener("click", mouseClick);

        function mouseDown() {
          mouseHoldTimeout = setTimeout(() => {
            value++;
            mouseDownDone = true;
            document.getElementById("demo").innerHTML = value.toString();
          }, 1000);
        }


        function mouseClick() {
          if (mouseHoldTimeout) {
            clearTimeout(mouseHoldTimeout);
            mouseHoldTimeout = null;
          }
          if (mouseDownDone) {
            mouseDownDone = false;
            return;
          }
          value += 15;
          document.getElementById("demo").innerHTML = value.toString();
        }

【讨论】：

【解决方案2】：

mousedown 事件会在您点击左或右甚至中时触发。无论您点击哪一个都无所谓它运行该功能。相比之下，当您单击 left 时会触发 click 事件。因此，当您单击左侧时，您似乎会触发 mousedown（对于左侧）和 click 事件。由于文档提供了 mousedown 和 mouseup 之后的点击事件触发。

js mouse basics

【讨论】：