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的。 如果有一种方法可以在窗口外面点击鼠标，然后将鼠标放到窗口中，那么这可能无法正常工作。
