JavaScript:检查如鼠标按下按钮?

Question

有没有方法检测如果鼠标按目前下在JavaScript?

我知道关于"mousedown"事件，但这不是我需要的。一段时间后鼠标按钮被按下时，我希望能够检测，如果它仍然是压制下来。

这可能吗？

Answer 1

关于人'的解决方案：它不工作，如果用户的点击超过一个按钮有意或无意。不要问我，我怎么知道：-(.

正确的代码应等于：

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开始了。即采用一位掩目前按下按钮：

• 0对于"什么是压"
• 1左
• 2针对正确的
• 4中
• 和任何组合所述，例如，5左+中

所以调整代码中相应的!我把它作为一个运动。

请记住：即使用全球事件的对象被称为"事件"。

顺便提一下即有一个特点有用的你的情况:当其他浏览器发送"钮"只是用鼠标按钮事件(击,onmousedown，并onmouseup)，即将它发送与onmousemove。这样你就可以开始倾听onmousemove当你需要知道按钮状态，并检查evt.按钮尽快你得到了它—现在你知道什么样的鼠标按钮被按下:

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

当然你得到什么，如果她起死亡和不动。

相关链接：

• 鼠标事件的按钮(DOM2)
• MSDN的按钮

更新#1:我不知道为什么我进行过的文件。体风格的代码。它将更好地附事件处理程序直接的文件。

Answer 2

这是一个古老的问题和答案在这里似乎主要是倡导使用 mousedown 和 mouseup 跟踪是否是一个按钮被按下。但是，正如其他人已经指出的那样， mouseup 只会火时内进行浏览器，这可能会导致失踪的按钮状态。

但是， 鼠标事件 (现在)指明哪些按钮是目前推动:

• 所有现代浏览器(除Safari)使用 MouseEvent.buttons
• 为野生动物园，使用 MouseEvent.which (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;

如果有更多的复杂情况要求(不同的按钮/多个按钮/键控制)，检查了鼠标事件文档。当/如果Safari升，这应该得到更加容易。

Answer 3

我觉得这个最好的办法是保持自己的鼠标按钮的状态的记录，如下所示：

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 4

溶液是不好的。 人们可以在文档“鼠标按下”，然后“鼠标松开”浏览器之外，并在此情况下，浏览器将仍然思维鼠标向下。

唯一好的溶液使用IE.event对象。

Answer 5

我知道这是旧的文章，但我用鼠标向上/向下感觉有点笨重认为鼠标按钮的跟踪，所以我觉得可能会吸引一些替代。

<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事件状态的方法。对于我需要欺骗和依赖于事实的默认光标为“自动”，我只是将其更改为“默认”，这是默认情况下选择什么汽车。

您可以使用由返回的getComputedStyle对象任何东西，你可以作为一个标志使用不打破你的网页例如外观边框颜色。

我也喜欢把我自己的用户定义的样式在：积极部分，但我无法得到那个工作。这将是更好的，如果这是可能的。

Answer 6

下面的代码片断会试图在mouseDown事件中发生document.body的后执行“doStuff”功能2秒。如果用户抬起按钮，将发生mouseUp事件和取消延迟执行。

我使用一些方法，用于跨浏览器事件附着指教 - 设置鼠标按下和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 7

短和甜

我不知道为什么没有对以前的答案为我工作，但我想出了一个激动人心的时刻在这个解决方案。它不仅适用，但它也是最优雅的：

...添加到身体标记：

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

然后测试，如果myfunction()等于down执行1：

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

Answer 8

您可以结合@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 9

您需要处理MouseDown和MouseUp并设置一些标志或东西跟踪它“以后在路上” ...：（

Answer 10

使用jQuery，下面的溶液处理连“拖动到页面然后释放情况。”

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

我不知道如何处理多个鼠标按钮。 如果有启动窗外的点击的方式，然后把鼠标放到窗口，那么这可能会无法正常工作有两种。

Answer 11

下面的jQuery例如，当鼠标在$（“元素”），颜色发生变化，这取决于被按下鼠标按钮。

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 12

作为上述@杰克的时候 mouseup 发生的外部浏览器窗口，我们不知道它...

这个代码(几乎)的工作对我来说:

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

不幸的是，我不会的 mouseup 事件在一些情况：

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

Answer 13

如果你使用现有的鼠标事件处理程序复杂的页面中工作，我建议你处理上的捕获（而不是泡沫）的事件。要做到这一点，只需设置addEventListener到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 14

好了，你不能检查它是否在事件发生后的回落，但你可以检查它是否是最多......如果它是由..它意味着不再下跌：P大声笑

因此，用户按下按钮向下（onmousedown事件事件）......之后，你是否是向上（onMouseUp）。虽然它不涨，你可以做你所需要的。

Answer 15

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

这跨浏览器版本为我工作得很好。