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

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

我知道"mousedown"事件,但这不是我需要的.按下鼠标按钮一段时间后,我希望能够检测到它是否仍然按下.

这可能吗？

1> Eugene Lazut..：

---

关于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)发送"按钮"时,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风格的代码.最好将事件处理程序直接附加到文档中.

---

我认为这在Chrome中不起作用,因为如果原始mousedown发生在滚动条上,则Chrome不会生成鼠标事件.[示例](http://www.pmarks.net/posted_links/chromium_up_down_bug.html),来自[此Chrome/Chromium问题](http://code.google.com/p/chromium/issues/detail?id = 14204).因此,如果有人使用滚动条,您的鼠标左键将永远停止!(在Chrome中)

---

我不明白为什么你在第二个例子中增加mousedown数组elts.为什么每个按钮的计数器而不是每个按钮的bool？

---

这是一个非常受欢迎的问题(和答案).我很惊讶这还没有出现,但你根本不需要存储鼠标数据.您可以将`event.buttons`插入到您正在使用的任何事件触发器中,而无需外部保存的变量.我问了一个全新的问题(因为我的mouseup事件并不总是触发,所以这个解决方案对我不起作用)并且在5分钟内完成了答案.

2> Jono Job..：

---

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

但是,MouseEvent(现在)指示当前按下的按钮:

适用于所有现代浏览器(Safari除外)使用 MouseEvent.buttons

对于Safari,请使用MouseEvent.which(对于Safari,buttons将不会定义)注意:对于右键和中键点击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提升游戏时,这将变得更容易.

---

此代码检查是否仅按下主按钮并要求所有其他按钮未按下.(例如,如果按下主要和次要,则"e.buttons"将为"1 + 2 = 3",因此"e.buttons === 1"将为假).如果要检查主按钮是否已关闭,但不关心任何其他按钮状态,请执行以下操作:`(e.buttons&1)=== 1`

3> paxdiablo..：

---

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

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

---

是否有理由不使用布尔值？

4> 小智..：

---

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

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

---

我看到你来自哪里,但拥有一个仅适用于IE的解决方案也不是一个好的解决方案.

5> Martin..：

---

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

Click and drag me!

:主动选择器比鼠标向上/向下处理鼠标点击要好得多,你只需要在onmousemove事件中读取该状态的方法.为此我需要作弊并依赖于默认光标为"auto"的事实,我只是将其更改为"default",这是默认情况下自动选择的.

您可以使用getComputedStyle返回的对象中的任何内容,您可以将其用作标记,而不会破坏页面的外观,例如border-color.

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