JavaScript：检查鼠标按钮是否按下？

有没有一种方法可以检测JavaScript中的鼠标按钮当前是否已按下

我知道“mousedown”事件，但那不是我需要的。在按下鼠标按钮一段时间后，我希望能够检测到它是否仍被按下

---

这可能吗？

嗯，你不能在活动结束后检查它是否关闭，但你可以检查它是否打开。。。如果有空。。这意味着不再是下降：P lol

---

因此，用户按下按钮（onMouseDown事件）。。。然后，您检查是否已启动（onMouseUp）。当未启动时，您可以执行所需操作。

以下代码段将在document.body中发生mouseDown事件2秒后尝试执行“doStuff”函数。如果用户提起按钮，将发生mouseUp事件并取消延迟执行

我建议对跨浏览器事件附件使用一些方法—显式设置mousedown和mouseup属性是为了简化示例

function doStuff() {
  // does something when mouse is down in body for longer than 2 seconds
}

var mousedownTimeout;

document.body.onmousedown = function() { 
  mousedownTimeout = window.setTimeout(doStuff, 2000);
}

document.body.onmouseup = function() {
  window.clearTimeout(mousedownTimeout);
}

---

我认为最好的方法是保存您自己的鼠标按钮状态记录，如下所示：

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

然后，在代码的后面：

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

---

您可以将@Pax和my answers组合在一起，以获得鼠标已按下的持续时间：

var mousedownTimeout,
    mousedown = 0;

document.body.onmousedown = function() {
  mousedown = 0; 
  window.clearInterval(mousedownTimeout);
  mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}

document.body.onmouseup = function() {
  mousedown = 0;
  window.clearInterval(mousedownTimeout);
}

随后：

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

---

关于Pax的解决方案：如果用户有意或无意地单击多个按钮，则该解决方案不起作用。不要问我是怎么知道的

正确的代码应如下所示：

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

通过这样的测试：

if(mouseDown){
  // crikey! isn't she a beauty?
}

如果您想知道按下了什么按钮，请准备将鼠标向下移动一组计数器，并分别计算各个按钮的数量：

// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
    mouseDownCount = 0;
document.body.onmousedown = function(evt) { 
  ++mouseDown[evt.button];
  ++mouseDownCount;
}
document.body.onmouseup = function(evt) {
  --mouseDown[evt.button];
  --mouseDownCount;
}

现在，您可以检查到底按下了哪些按钮：

if(mouseDownCount){
  // alright, let's lift the little bugger up!
  for(var i = 0; i < mouseDown.length; ++i){
    if(mouseDown[i]){
      // we found it right there!
    }
  }
}

当然，如果她装死不动，你什么也得不到

相关链接：

---

更新#1：我不知道为什么我要使用document.body风格的代码。最好将事件处理程序直接附加到文档。

您需要处理MouseDown和MouseUp，并设置一些标志或其他东西来“以后”跟踪它……（

解决方案不好。 人们可以在文档上“mousedown”，然后在浏览器外“mouseup”，在这种情况下，浏览器仍会认为鼠标已按下

唯一好的解决方案是使用IE.event对象。

Short and sweet 我不知道为什么之前的答案对我都不起作用，但我在一瞬间想出了这个解决方案。它不仅有效，而且非常优雅：

添加到正文标记：

onmouseup="down=0;" onmousedown="down=1;"

然后测试并执行

myfunction（）

如果

down

等于

1

：

onmousemove="if (down==1) myfunction();"

---

这个跨浏览器版本对我来说很好。

使用jQuery，下面的解决方案甚至可以处理“从页面上拖出然后发布”的情况

我不知道它如何处理多个鼠标按钮。

---

如果有一种方法可以在窗口外开始单击，然后将鼠标移到窗口中，那么这也可能无法正常工作。

在jQuery示例下面，当鼠标位于$（'.element'）上方时，颜色会根据按下的鼠标按钮而变化

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});

---

我知道这是一篇老文章，但我觉得用鼠标上下移动鼠标按钮有点笨重，所以我找到了一个可能吸引一些人的替代方法

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

div.myDiv：活动{
游标：默认值；
}
功能手柄移动（div）{
var style=getComputedStyle（div）；
if（style.getPropertyValue（'cursor'）=='default'）
{
//你下来了，搬到这里来了！
}
}
点击并拖动我！

：active selector比mouse up/down更好地处理鼠标点击，您只需要在onmousemove事件中读取该状态的一种方式。为此，我需要作弊，并依赖于默认光标为“auto”，我只是将其更改为“default”，这是auto默认选择的

您可以使用getComputedStyle返回的对象中的任何内容作为标记，而不会破坏页面的外观，例如边框颜色

---

我本想在：活动部分设置我自己的用户定义样式，但我无法实现。如果可能的话会更好。

正如@Jack所说，当

鼠标移动

发生在浏览器窗口之外时，我们没有意识到

这个代码（几乎）对我有效： 不幸的是，在以下情况之一，我将无法获得

mouseup

事件：

• 用户同时按下键盘键和鼠标键，在浏览器窗口外释放鼠标键，然后释放键
• 用户同时按下两个鼠标按钮，释放一个鼠标按钮，然后释放另一个鼠标按钮，两者都在浏览器窗口之外

---

如果您在使用现有鼠标事件处理程序的复杂页面中工作，我建议您在capture上处理事件（而不是bubble）。为此，只需将

addEventListener

的第三个参数设置为

true

此外，您可能需要检查

事件，以确保您正在处理实际的用户交互而不是鼠标事件，例如
元素dispatchEvent（新事件（'mousedown'））

将处理程序添加到文档（或窗口）与document.body不同，b/c是重要的，它确保窗口外的鼠标移动事件仍然被记录。
这是一个老问题，这里的答案似乎主要支持使用
mousedown
和
mouseup
来跟踪按钮是否被按下。但正如其他人所指出的，
mouseup
仅当在浏览器中执行时才会触发，这可能导致无法跟踪按钮状态

但是，（现在）指示当前按下的按钮：


对于所有现代浏览器（Safari除外），请使用
对于Safari，使用（
按钮
对于Safari将是未定义的）注意：
其中
使用了与
不同的数字
$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

var isMouseDown = false;

document.addEventListener('mousedown', function(event) { 
    if ( event.which ) isMouseDown = true;
}, true);

document.addEventListener('mouseup', function(event) { 
    if ( event.which ) isMouseDown = false;
}, true);

var leftMouseButtonOnlyDown = false;

function setLeftButtonState(e) {
  leftMouseButtonOnlyDown = e.buttons === undefined 
    ? e.which === 1 
    : e.buttons === 1;
}

document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;

function mouseDown() {
    return document.body.matches(":active");
}