JavaScript: Comprobar si el botón del mouse está presionado

¿Hay alguna manera de detectar si un botón del mouse está actualmente desactivado en JavaScript?

Sé sobre el evento "mousedown", pero eso no es lo que necesito. Algún tiempo DESPUÉS de presionar el botón del mouse, quiero poder detectar si todavía está presionado.

es posible?

Con respecto a la solución de Pax: no funciona si el usuario hace clic en más de un botón de manera intencional o accidental. No me preguntes cómo sé :-(.

El código correcto debería ser así:

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

Con la prueba como esta:

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

Si desea saber qué botón se presiona, prepárese para hacer que mouseDown sea una matriz de contadores y contarlos por separado para botones 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;
}

Ahora puede verificar qué botones se presionaron exactamente:

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

Ahora tenga en cuenta que el código anterior funcionaría solo para navegadores compatibles con el estándar que le pasen un número de botón a partir de 0. IE usa una máscara de bits de los botones presionados actualmente:

• 0 para "nada se presiona"
• 1 para la izquierda
• 2 por derecho
• 4 para el medio
• y cualquier combinación de arriba, por ejemplo, 5 para izquierda + medio

¡Ajuste su código en consecuencia! Lo dejo como ejercicio.

Y recuerde: IE usa un objeto de evento global llamado ... "evento".

Por cierto, IE tiene una función útil en su caso: cuando otros navegadores envían "botón" solo para eventos de botón del mouse (onclick, onmousedown y onmouseup), IE también lo envía con onmousemove. Entonces puede comenzar a escuchar onmousemove cuando necesite conocer el estado del botón y verificar el botón evt. Tan pronto como lo tenga, ahora ya sabe qué botones del mouse se presionaron:

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

Por supuesto, no obtienes nada si se hace la muerta y no se mueve.

Enlaces relevantes:

• Botón del MouseEvent (DOM 2)
• Botón de MSDN

Actualización n. ° 1 : No sé por qué transfirí el documento. Será mejor adjuntar controladores de eventos directamente al documento.

Esta es una vieja pregunta, y las respuestas aquí parecen recomendar principalmente el uso mousedowny mouseuprealizar un seguimiento de si se presiona un botón. Pero como otros han señalado, mouseupsolo se disparará cuando se realice dentro del navegador, lo que puede conducir a perder la noción del estado del botón.

Sin embargo, MouseEvent (ahora) indica qué botones se presionan actualmente:

• Para todos los navegadores modernos (excepto Safari) use MouseEvent.buttons
• Para Safari, use MouseEvent.which( buttonsno estará definido para Safari) Nota: whichusa números diferentes buttonspara los clics derecho y medio.

Cuando se registre document, mousemovese disparará inmediatamente tan pronto como el cursor vuelva a ingresar al navegador, por lo que si el usuario libera afuera, el estado se actualizará tan pronto como vuelva a colocar el mouse dentro.

Una implementación simple podría verse así:

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;

Si se requieren escenarios más complicados (botones diferentes / botones múltiples / teclas de control), consulte los documentos de MouseEvent. Cuando / si Safari levanta su juego, esto debería ser más fácil.

Creo que el mejor enfoque para esto es mantener su propio registro del estado del botón del mouse, de la siguiente manera:

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

y luego, más adelante en tu código:

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

La solución no es buena. uno podría "pasar el mouse" sobre el documento, luego "pasar el mouse" fuera del navegador, y en este caso el navegador aún estaría pensando que el mouse está abajo.

La única buena solución es usar el objeto IE.event.

Sé que esta es una publicación antigua, pero pensé que el seguimiento del botón del mouse usando el mouse arriba / abajo se sentía un poco torpe, así que encontré una alternativa que puede ser atractiva para algunos.

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

El selector activo maneja el clic del mouse mucho mejor que el mouse arriba / abajo, solo necesita una forma de leer ese estado en el evento onmousemove. Para eso necesitaba hacer trampa y confiar en el hecho de que el cursor predeterminado es "automático" y simplemente lo cambio a "predeterminado", que es lo que selecciona automáticamente por defecto.

Puede usar cualquier cosa en el objeto que devuelve getComputedStyle que puede usar como bandera sin alterar el aspecto de su página, por ejemplo, el color del borde.

Me hubiera gustado establecer mi propio estilo definido por el usuario en la sección: active, pero no pude lograr que funcione. Sería mejor si es posible.

El siguiente fragmento intentará ejecutar la función "doStuff" 2 segundos después de que ocurra el evento mouseDown en document.body. Si el usuario levanta el botón, se producirá el evento mouseUp y cancelará la ejecución retrasada.

Aconsejaría usar algún método para la conexión de eventos entre navegadores: se configuró explícitamente las propiedades de mousedown y mouseup para simplificar el ejemplo.

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

Corto y dulce

No estoy seguro de por qué ninguna de las respuestas anteriores funcionó para mí, pero se me ocurrió esta solución durante un momento eureka. No solo funciona, sino que también es muy elegante:

Añadir a la etiqueta del cuerpo:

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

Luego pruebe y ejecute myfunction()si downes igual a 1:

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

Puede combinar @Pax y mis respuestas para obtener también la duración de la inactividad del mouse:

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

Entonces despúes:

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

Debe manejar MouseDown y MouseUp y establecer alguna bandera o algo para rastrearlo "más adelante" ... :(

Si está trabajando dentro de una página compleja con controladores de eventos de mouse existentes, le recomiendo manejar el evento en la captura (en lugar de la burbuja). Para hacer esto, simplemente configure el tercer parámetro de addEventListenerto true.

Además, es posible que desee verificar para event.whichasegurarse de que maneja la interacción real del usuario y no los eventos del mouse, por ejemplo 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);

Agregue el controlador al documento (o ventana) en lugar de document.body es importante porque garantiza que los eventos de mouse fuera de la ventana aún se graben .

Usando la API MouseEvent , para verificar el botón presionado, si lo hay:

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

Vuelta :

Un número que representa uno o más botones. Para más de un botón presionado simultáneamente, los valores se combinan (por ejemplo, 3 es primario + secundario).

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 jQuery, la siguiente solución maneja incluso el "arrastre de la página y luego suelte el caso".

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

No sé cómo maneja múltiples botones del mouse. Si hubiera una manera de iniciar el clic fuera de la ventana, luego acerque el mouse a la ventana, entonces esto probablemente tampoco funcionaría correctamente allí.

Debajo del ejemplo de jQuery, cuando el mouse está sobre $ ('elemento'), el color cambia dependiendo del botón del mouse que se presione.

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 dijo @Jack, cuando mouseupsucede fuera de la ventana del navegador, no nos damos cuenta ...

Este código (casi) funcionó para mí:

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

Desafortunadamente, no obtendré el mouseupevento en uno de esos casos:

• el usuario presiona simultáneamente una tecla del teclado y un botón del mouse, suelta el botón del mouse fuera de la ventana del navegador y luego suelta la tecla.
• el usuario presiona dos botones del mouse simultáneamente, suelta un botón del mouse y luego el otro, ambos fuera de la ventana del navegador.

Bueno, no puedes comprobar si está inactivo después del evento, pero puedes comprobar si está activo ... Si está activo ... significa que ya no está inactivo: jajaja

Entonces, el usuario presiona el botón hacia abajo (evento onMouseDown) ... y después de eso, verifica si está activo (onMouseUp). Si bien no está activo, puedes hacer lo que necesites.

        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 versión de navegador cruzado funciona bien para mí.