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 的按钮 (DOM 2)
• MSDN 的按钮

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

Answer 2

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

但是， MouseEvent (now) 指示当前按下了哪些按钮：

• 对于所有现代浏览器（包括 Safari v11.1+ [iOS 上的 v11.3+]），请使用MouseEvent.buttons
• 对于 Safari < 11.1（iOS 上为 11.3），请使用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

如果您正在使用现有鼠标事件处理程序在复杂页面中工作，我建议您在捕获时处理事件（而不是气泡）。 为此，只需将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

以下代码片段将在 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

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

 // Mouse buttons document.addEventListener('mousedown', e => console.log(e.buttons)) // Keyboard keys document.addEventListener('keydown', e => console.log(e.key))

返回：

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

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

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

Answer 10

短而甜

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

添加到正文标签：

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

然后测试并执行myfunction()如果down等于1 ：

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

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

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

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

好吧，您无法在活动结束后检查它是否已关闭，但您可以检查它是否已启动...如果已启动.. 则表示不再关闭：P 大声笑

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