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

有没有一种方法可以检测JavaScript中的鼠标按钮当前是否处于按下状态？

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

这可能吗？

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

正确的代码应如下所示：

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

通过这样的测试：

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

如果您想知道按下了什么按钮，请准备将mouseDown设置为一个计数器数组，并对单独的按钮分别计数：

// 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!
    }
  }
}

现在请注意，以上代码仅适用于向您传递按钮编号（从0开始）的标准兼容浏览器。IE使用当前按下按钮的位掩码：

• 0为“什么都没按下”
• 1左
• 2对
• 4个中间
• 以及以上的任意组合，例如，左+中为5

因此，请相应地调整您的代码！我把它留作练习。

请记住：IE使用一个名为…“ event”的全局事件对象。

顺便说一句，IE具有一种适用于您的情况的功能：当其他浏览器仅针对鼠标事件（onclick，onmousedown和onmouseup）发送“ button”时，IE也会通过onmousemove发送它。因此，当您需要了解按钮状态时就可以开始监听onmousemove，并在获取按钮后立即检查evt.button －现在您知道按下了哪些鼠标按钮：

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

当然，如果她死了而且不动，你什么也得不到。

相关链接：

• MouseEvent的按钮（DOM 2）
• MSDN的按钮

更新＃1：我不知道为什么要保留document.body样式的代码。最好将事件处理程序直接附加到文档。

这是一个古老的问题，这里的答案似乎主要提倡使用mousedown并mouseup跟踪按钮是否被按下。但正如其他人指出的那样，mouseup只有在浏览器中执行时才会触发，这可能会导致无法跟踪按钮状态。

但是，MouseEvent（现在）指示当前按下了哪些按钮：

• 对于所有现代浏览器（Safari除外），请使用 MouseEvent.buttons
• 对于Safari浏览器，使用MouseEvent.which（buttons将不确定的Safari浏览器）注：which从使用不同数量buttons的右和中间点击。

当在上注册时document，mousemove一旦光标重新进入浏览器，它将立即触发，因此，如果用户释放到外部，则只要将鼠标移回内部，状态就会更新。

一个简单的实现可能看起来像：

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;

如果需要更复杂的场景（不同的按钮/多个按钮/控制键），请查看MouseEvent文档。当/如果Safari取消其游戏，这应该会变得更加容易。

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

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.
}

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

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

我知道这是一篇过时的文章，但是我认为使用鼠标上/下键来跟踪鼠标按钮感觉有些笨拙，因此我找到了一种可能吸引某些人的替代方法。

<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>

：active选择器处理鼠标单击要比向上/向下鼠标好得多，您只需要一种在onmousemove事件中读取状态的方法即可。为此，我需要作弊并依靠默认光标为“自动”的事实，而只是将其更改为“默认”，这是默认情况下自动选择的内容。

您可以在getComputedStyle返回的对象中使用可以用作标志的任何内容，而不会破坏页面的外观，例如border-color。

我本想在：active部分中设置自己的用户定义样式，但无法使其正常工作。如果可能的话会更好。

以下代码段将在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);
}

简短而甜美

我不确定为什么以前的答案都不对我有用，但是我在尤里卡的时候提出了这个解决方案。它不仅有效，而且最优雅：

添加到正文标签：

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

然后测试并执行myfunction()是否down等于1：

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

您可以结合使用@Pax和我的答案来获得鼠标按下的持续时间：

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
}

您需要处理MouseDown和MouseUp并设置一些标记或某些东西来“在以后”跟踪它... :(

如果您使用现有的鼠标事件处理程序在一个复杂的页面中工作，建议您在捕获时处理事件（而不是气泡）。为此，只需将的第3个参数设置addEventListener为true。

此外，您可能需要检查event.which以确保您正在处理实际的用户交互而不是鼠标事件，例如elem.dispatchEvent(new Event('mousedown'))。

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

将处理程序添加到文档（或窗口）而不是document.body是很重要的b / c，它可以确保仍然记录窗口外的 mouseup事件。

使用MouseEvent API检查按下的按钮（如果有）：

document.addEventListener('mousedown', (e) => console.log(e.buttons))

返回：

一个代表一个或多个按钮的数字。如果同时按下多个按钮，则将这些值组合在一起（例如，3个为主要+次要）。

0 : No button or un-initialized
1 : Primary button (usually the left button)
2 : Secondary button (usually the right button)
4 : Auxilary button (usually the mouse wheel button or middle button)
8 : 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)

使用jQuery，以下解决方案甚至可以处理“拖动页面然后释放大小写”的情况。

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

我不知道它如何处理多个鼠标按钮。如果有一种方法可以在窗口外部开始单击，然后将鼠标移到窗口中，那么在该窗口中也可能无法正常工作。

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

就像@Jack所说的，当mouseup发生在浏览器窗口之外时，我们不知道它...

这段代码（几乎）对我有用：

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

不幸的是，mouseup在以下情况之一中，我不会获得该事件：

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

好吧，您不能在事件之后检查它是否已关闭，但是您可以检查它是否已启动...如果它已启动..这意味着不再关闭了：P哈哈

因此，用户按下按钮（onMouseDown事件）...之后，您检查按钮是否按下（onMouseUp）。虽然还没有启动，但是您可以做您需要的事情。

        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

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