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

Question

有没有办法在 JavaScript 中检测鼠标按钮当前是否按下？

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

这可能吗？

Answer 1

关于 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 使用一个名为...“事件”的全局事件对象。

顺便提一下，IE 有一个对您有用的功能：当其他浏览器仅为鼠标按钮事件（onclick、onmousedown 和 onmouseup）发送“按钮”时，IE 也会使用 onmousemove 发送它。因此，当您需要知道按钮状态时，您可以开始监听 onmousemove，并在获得后立即检查 evt.button - 现在您知道按下了哪些鼠标按钮：

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

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

相关链接：

• MouseEvent's button (DOM 2)
• MSDN's button

更新 #1：我不知道为什么我继承了 document.body 样式的代码。将事件处理程序直接附加到文档会更好。

Answer 2

这是一个老问题，这里的答案似乎大多主张使用mousedown 和mouseup 来跟踪按钮是否被按下。但正如其他人所指出的，mouseup 只会在浏览器中执行时触发，这可能会导致按钮状态丢失。

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

• 对于所有现代浏览器（包括 Safari v11.1+ [iOS 上的 v11.3+]），请使用 MouseEvent.buttons
• 对于 Safari MouseEvent.which（对于 Safari，buttons 将未定义）注意：which 使用与 buttons 不同的数字来进行右键和中键单击。

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

一个简单的实现可能如下所示：

var primaryMouseButtonDown = false;

function setPrimaryButtonState(e) {
  var flags = e.buttons !== undefined ? e.buttons : e.which;
  primaryMouseButtonDown = (flags & 1) === 1;
}

document.addEventListener("mousedown", setPrimaryButtonState);
document.addEventListener("mousemove", setPrimaryButtonState);
document.addEventListener("mouseup", setPrimaryButtonState);

该代码跟踪鼠标主键（通常是左键）的状态，忽略其他鼠标键的状态。

如果需要更复杂的场景（不同的按钮/多个按钮/控制键），请查看MouseEvent 文档。

Answer 3

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

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

Answer 4

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

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

Answer 5

我知道这是一篇旧帖子，但我认为使用鼠标向上/向下跟踪鼠标按钮感觉有点笨拙，所以我找到了可能吸引某些人的替代方法。

<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 返回的对象中的任何内容，您可以将其用作标志而不会破坏页面的外观，例如边框颜色。

我本来想在 :active 部分设置我自己的用户定义样式，但我无法让它工作。如果可以的话就更好了。

Answer 6

如果您使用现有的鼠标事件处理程序在复杂页面中工作，我建议您在 capture 上处理事件（而不是气泡）。为此，只需将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 很重要，因为它可以确保 窗口外的 mouseup 事件仍然被记录。

Answer 7

以下 sn-p 将在 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);
}

Answer 8

您可以结合@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
}

Answer 9

您需要处理 MouseDown 和 MouseUp 并设置一些标志或其他东西以“稍后”跟踪它...... :(

Answer 10

又短又甜

我不确定为什么以前的答案都不适合我，但我在灵光乍现的时刻想出了这个解决方案。它不仅有效，而且最优雅：

添加到正文标签：

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

如果down等于1，则测试并执行myfunction()：

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

Answer 11

使用 jQuery，以下解决方案甚至可以处理“拖出页面然后释放案例”。

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

我不知道它如何处理多个鼠标按钮。 如果有办法在窗口外开始单击，然后将鼠标带入窗口，那么这可能也无法正常工作。

Answer 12

使用MouseEvent api，检查按下的按钮，如果有的话：

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

Return:

代表一个或多个按钮的数字。对于多个按钮 同时按下，这些值被组合（例如，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)

Answer 13

如果其他人遇到这种情况，您可以将.matches 与:active 选择器一起使用：

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

Answer 14

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

Answer 15

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

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

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

很遗憾，在其中一种情况下，我不会收到 mouseup 事件：

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

Answer 16

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

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

Answer 17

好吧，你不能在活动结束后检查它是否关闭，但你可以检查它是否是 Up... 如果它是 up.. 这意味着不再是 down :P lol

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