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 for left
• 2 for right
• 4 for middle
• 以及上述的任何组合，例如，5为左+中

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

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

顺便提一下，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

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

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 3

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

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

Answer 4

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

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

：活动选择器处理鼠标点击比鼠标上/下更好，你只需要一种在onmousemove事件中读取该状态的方法。为此，我需要作弊并依赖于默认光标为“auto”的事实，我只是将其更改为“default”，这是默认情况下自动选择的内容。

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

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

Answer 5

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

短而甜蜜

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

添加到正文标记：

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

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

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

Answer 7

您可以将@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 8

你需要处理MouseDown和MouseUp并设置一些标志或某些东西来“追踪它”...... :(

Answer 9

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

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

我不知道它如何处理多个鼠标按钮。 如果有办法在窗口外面启动点击，然后将鼠标移到窗口中，那么这可能无法在那里正常工作。

Answer 10

在jQuery示例下，当鼠标超过$（＆＃39; .element＆＃39;）时，颜色会根据按下的鼠标按钮而改变。

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 11

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

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

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

不幸的是，我不会在其中一个案例中得到mouseup事件：

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

Answer 12

如果您在具有现有鼠标事件处理程序的复杂页面中工作，我建议您在捕获（而不是冒泡）上处理该事件。为此，只需将addEventListener的第3个参数设置为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它确保仍然记录窗口外的鼠标事件

。

Answer 13

使用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 14

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

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

Answer 15

嗯，你无法检查事件发生后是否瘫痪，但是你可以查看它是否已经启动......如果它已经启动......那就意味着不再失败了：P lol

因此用户按下按钮（onMouseDown事件）......然后，检查是否已启动（onMouseUp）。虽然它不起来，但你可以做你需要的。

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

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