JavaScript: Verifique se o botão do mouse está pressionado?

Existe uma maneira de detectar se um botão do mouse está atualmente pressionado em JavaScript?

Eu sei sobre o evento "mousedown", mas não é disso que eu preciso. Depois de pressionar o botão do mouse, desejo detectar se ele ainda está pressionado.

Isso é possível?

Em relação à solução do Pax: não funciona se o usuário clicar em mais de um botão intencionalmente ou acidentalmente. Não me pergunte como eu sei :-(.

O código correto deve ser assim:

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

Com o teste como este:

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

Se você quiser saber qual botão foi pressionado, esteja preparado para fazer do mouseDown uma matriz de contadores e conte-os separadamente para botões separados:

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

Agora você pode verificar exatamente quais botões foram pressionados:

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

Agora, esteja avisado de que o código acima funcionaria apenas para navegadores compatíveis com o padrão que passam um número de botão a partir de 0 ou superior. O IE usa uma máscara de bit dos botões pressionados no momento:

• 0 para "nada é pressionado"
• 1 para a esquerda
• 2 para a direita
• 4 para o meio
• e qualquer combinação dos itens acima, por exemplo, 5 para esquerda + média

Então ajuste seu código de acordo! Eu deixo isso como um exercício.

E lembre-se: o IE usa um objeto de evento global chamado… "event".

Aliás, o IE possui um recurso útil no seu caso: quando outros navegadores enviam "botão" apenas para eventos de botão do mouse (onclick, onmousedown e onmouseup), o IE o envia com onmousemove também. Assim, você pode começar a ouvir onmousemove quando precisar conhecer o estado do botão e verificar o botão evt.botton assim que o conseguir - agora você sabe quais botões do mouse foram pressionados:

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

Claro que você não ganha nada se ela fingir de morta e não se mover.

Links relevantes:

• Botão do MouseEvent (DOM 2)
• Botão do MSDN

Atualização # 1 : Não sei por que carreguei o documento. Estilo do código do corpo. Será melhor anexar manipuladores de eventos diretamente ao documento.

Essa é uma pergunta antiga, e as respostas aqui parecem advogar principalmente o uso mousedowne o mouseupacompanhamento de pressionar um botão. Mas, como outros já apontaram, mouseupsó serão acionados quando executados no navegador, o que pode levar à perda do controle do estado do botão.

No entanto, MouseEvent (agora) indica quais botões estão pressionados no momento:

• Para todos os navegadores modernos (exceto o Safari), use MouseEvent.buttons
• Para o Safari, use MouseEvent.which( buttonsserá indefinido para o Safari) Nota: whichusa números diferentes dos buttonscliques direito e médio.

Quando registrado document, mousemoveserá acionado imediatamente assim que o cursor entrar novamente no navegador; portanto, se o usuário liberar fora, o estado será atualizado assim que o mouse voltar para dentro.

Uma implementação simples pode se parecer com:

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;

Se forem necessários cenários mais complicados (botões diferentes / vários botões / teclas de controle), consulte a documentação do MouseEvent. Quando / se o Safari melhorar o jogo, isso deve ficar mais fácil.

Eu acho que a melhor abordagem para isso é manter seu próprio registro do estado do botão do mouse, da seguinte maneira:

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

e depois, mais tarde no seu código:

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

a solução não é boa. pode-se "reduzir o mouse" no documento e, em seguida, "passar o mouse" fora do navegador e, nesse caso, o navegador ainda estaria pensando que o mouse está desativado.

a única boa solução é usar o objeto IE.event.

Sei que este é um post antigo, mas achei que o rastreamento do botão do mouse usando o mouse para cima / baixo era um pouco desajeitado, então encontrei uma alternativa que pode agradar a alguns.

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

O seletor: active lida com o clique do mouse muito melhor do que o mouse para cima / baixo, você só precisa de uma maneira de ler esse estado no evento onmousemove. Para isso, eu precisava trapacear e confiei no fato de que o cursor padrão é "auto" e apenas mudei para "default", que é o que o auto seleciona por padrão.

Você pode usar qualquer coisa no objeto retornado pelo getComputedStyle que possa ser usado como um sinalizador sem alterar a aparência da sua página, por exemplo, cor da borda.

Eu gostaria de definir meu próprio estilo definido pelo usuário na seção: active, mas não consegui fazer isso funcionar. Seria melhor se fosse possível.

O seguinte snippet tentará executar a função "doStuff" 2 segundos após o evento mouseDown ocorrer em document.body. Se o usuário levantar o botão, o evento mouseUp ocorrerá e cancelará a execução atrasada.

Eu aconselho o uso de algum método para anexação de eventos entre navegadores - a configuração explícita das propriedades de mouse e mouse foi feita para simplificar o exemplo.

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

Curto e grosso

Não sei por que nenhuma das respostas anteriores funcionou para mim, mas descobri essa solução durante um momento eureka. Não só funciona, mas também é mais elegante:

Adicionar à etiqueta do corpo:

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

Em seguida, teste e execute myfunction()se for downigual a 1:

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

Você pode combinar o @Pax e minhas respostas para também obter a duração em que o mouse ficou inativo:

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

Depois, mais tarde:

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

Você precisa lidar com o MouseDown e o MouseUp e definir alguma bandeira ou algo para rastreá-lo "mais tarde na estrada" ... :(

Se você estiver trabalhando em uma página complexa com manipuladores de eventos de mouse existentes, recomendo manipular o evento na captura (em vez de bolha). Para fazer isso, basta definir o terceiro parâmetro de addEventListenercomo true.

Além disso, convém verificar event.whichse você está lidando com a interação real do usuário e não com os eventos do mouse, por exemplo 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);

Adicione o manipulador ao documento (ou janela) em vez de document.body é importante porque ele garante que os eventos de mouse fora da janela ainda sejam registrados.

Usando a API MouseEvent , para verificar o botão pressionado, se houver:

document.addEventListener('mousedown', (e) => console.log(e.buttons))

Retorno :

Um número representando um ou mais botões. Para mais de um botão pressionado simultaneamente, os valores são combinados (por exemplo, 3 é primário + secundário).

0 : No button or un-initialized
1 : Primary button (usually the left button)
2 : Secondary button (usually the right button)
4 : Auxilary button (usually the mouse wheel button or middle button)
8 : 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)

Usando o jQuery, a solução a seguir lida com o "arraste da página e solte o caso".

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

Não sei como ele lida com vários botões do mouse. Se houvesse uma maneira de iniciar o clique fora da janela, traga o mouse para dentro da janela e provavelmente isso também não funcionaria corretamente.

Abaixo do exemplo do jQuery, quando o mouse está sobre $ ('. Element'), a cor muda de acordo com o botão do mouse pressionado.

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

Como disse o @Jack, quando mouseupacontece fora da janela do navegador, não temos conhecimento disso ...

Este código (quase) funcionou para mim:

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

Infelizmente, não receberei o mouseupevento em um desses casos:

• o usuário pressiona simultaneamente uma tecla do teclado e um botão do mouse, libera o botão do mouse fora da janela do navegador e libera a tecla.
• usuário pressiona dois botões do mouse simultaneamente, libera um botão do mouse e o outro, ambos fora da janela do navegador.

Bem, você não pode verificar se está inativo após o evento, mas pode verificar se está ativo ... se ativo .. significa que não está mais ativo: P lol

Então o usuário pressiona o botão (evento onMouseDown) ... e depois disso, você verifica se está ativo (onMouseUp). Enquanto não estiver funcionando, você pode fazer o que precisa.

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

esta versão entre navegadores funciona bem para mim.