JavaScript:检查鼠标按钮是否关闭?

有没有办法检测JavaScript中的鼠标按钮当前是否关闭?

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

这可能吗?


答案 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!
  }
};

当然,如果她玩死了,不动,你什么也得不到。

相关链接:

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


答案 2

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

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

  • 对于所有现代浏览器(包括 Safari v11.1+ [iOS 上的 v11.3+]),请使用 MouseEvent.buttons
  • 对于 Safari < 11.1(iOS 上的 11.3),请使用 MouseEvent.that(Safari 将未定义) 注意:对右键单击和中键使用不同的数字。buttonswhichbuttons

注册于 时,一旦光标重新进入浏览器,就会立即触发,因此,如果用户在外部释放,则只要他们鼠标回到内部,状态就会更新。documentmousemove

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

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