JavaScript:检查鼠标是否按下?

有没有一种方法来检测是否在JavaScript中的鼠标button当前closures?

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

这可能吗?

关于Pax解决scheme:如果用户有意或无意点击多个button,则不起作用。 不要问我怎么知道:-(。

正确的代码应该是这样的:

var mouseDown = 0; document.body.onmousedown = function() { ++mouseDown; } document.body.onmouseup = function() { --mouseDown; } 

像这样的testing:

 if(mouseDown){ // crikey! isn't she a beauty? } 

如果您想知道按下了哪个button,请准备使mouseDown为一组计数器并分别为各个button进行计数:

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

现在您可以查看确切按下了哪些button:

 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开始的button号。 IE使用当前按下button的位掩码:

  • 0表示“没有被按下”
  • 1左边
  • 2为正确
  • 4中等
  • 以及上述的任意组合,例如,左边+中间的5

所以相应地调整你的代码! 我把它作为一个练习。

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

顺便说一句,IE有一个有用的function:当其他浏览器只发送鼠标button事件(onclick,onmousedown和onmouseup)的“button”时,IE也发送onmousemove。 所以,当你需要知道button的状态时,你可以开始监听onmousemove,一旦得到它就检查evt.button – 现在你知道按下了什么鼠标button了:

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

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

相关链接:

  • MouseEvent的button(DOM 2)
  • MSDN的button

更新#1 :我不知道为什么我inheritance了document.body风格的代码。 将事件处理程序直接附加到文档将会更好。

我认为最好的办法是保持你自己的鼠标button状态logging,如下所示:

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

解决scheme不好。 人们可以在文档上“捣鼓”,然后在浏览器外面“鼠标移动”,在这种情况下,浏览器仍然会认为鼠标已经closures。

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

在document.body中发生mouseDown事件2秒后,以下片段将尝试执行“doStuff”函数。 如果用户抬起button,则会发生mouseUp事件并取消延迟的执行。

我build议使用一些跨浏览器事件附件的方法 – 明确设置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); } 

简短而甜蜜

我不知道为什么以前的答案没有为我工作,但我在一个尤里卡时刻提出了这个解决scheme。 它不仅工作,而且也是最优雅的:

添加到正文标签:

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

然后,如果down等于1则testing并执行myfunction()

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

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

你需要处理MouseDown和MouseUp,并设置一些标志或东西来跟踪“以后的路”… 🙁

我知道这是一个旧的post,但我认为使用鼠标上/下鼠标button的跟踪感觉有点笨重,所以我find了一个可能吸引一些select。

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

主动select器处理鼠标点击比鼠标向上/向下更好,你只需要在onmousemove事件中读取该状态。 为此,我需要作弊,并依靠默认光标是“自动”的事实,我只是将其更改为“默认”,这是默认情况下自动select的事实。

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

我会喜欢在:active部分中设置自己的用户定义样式,但是我无法使其工作。 如果可能的话会更好。

在jQuery的例子下面,当鼠标超过$('。element')时,颜色会根据鼠标button被按下而改变。

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

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

这个代码(几乎)为我工作:

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

不幸的是,在其中一种情况下,我不会得到mouseup事件:

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

那么在事件发生后你不能检查是否发生故障,但是你可以检查它是否已经启动了…如果它已经启动了,那就意味着不再是停机了:P lol

所以用户按下button(onMouseDown事件)…之后,你检查是否(onMouseUp)。 虽然不起来,你可以做你所需要的。

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

这个跨浏览器版本适合我。

使用jQuery,以下解决scheme甚至可以处理“拖动页面然后释放大小写”。

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

我不知道它是如何处理多个鼠标button的。 如果有一种方法可以在窗口外面点击鼠标,然后将鼠标放到窗口中,那么这可能无法正常工作。