JavaScript: Comprobar si el botón del ratón hacia abajo?

Creo que el mejor enfoque para esto es mantener su propio registro del estado del botón del ratón, 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 su código:

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

La solución no es buena. uno podría " mousedown "en el documento, luego" mouseup " fuera del navegador, y en este caso el navegador todavía estaría pensando que el ratón está abajo.

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

Esta es una pregunta antigua, y las respuestas aquí parecen abogar principalmente por usar mousedown y mouseup para realizar un seguimiento de si se presiona un botón. Pero como otros han señalado, mouseup solo se disparará cuando se realice dentro del navegador, lo que puede llevar a perder la pista 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 (buttons nota: which utiliza números diferentes de buttons para los clics Derecho y Medio.

Cuando se registra el document, mousemove se disparará inmediatamente tan pronto como el cursor vuelva a entrar en el navegador, por lo que si el usuario libera fuera, el estado se actualizará tan pronto como vuelva al interior del ratón.

Una implementación simple podría parecerse a:

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 / múltiples botones / teclas de control), echa un vistazo a los documentos de MouseEvent. Cuando / si Safari levanta su juego, esto debería ser más fácil.

El siguiente fragmento intentará ejecutar la función "doStuff" 2 segundos después de que ocurra el evento mouseDown en el documento.cuerpo. 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 el archivo adjunto de eventos entre navegadores: establecer las propiedades mousedown y mouseup explícitamente se hizo 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);
}

Sé que este es un post antiguo, pero pensé que el seguimiento del botón del ratón usando el ratón arriba/abajo se sentía un poco torpe, así que encontré una alternativa que puede atraer a 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 :active maneja el clic del ratón mucho mejor que el ratón arriba/abajo, solo necesita una forma de leer ese estado en el evento onmousemove. Para eso necesitaba hacer trampa y confiaba en el hecho de que el cursor predeterminado es "auto" y solo lo cambio a "default", que es lo que auto selecciona por predeterminado.

Puede usar cualquier cosa en el objeto devuelto por getComputedStyle que pueda usar como bandera sin alterar el aspecto de su página, por ejemplo, border-color.

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

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 más elegante:

Añadir a la etiqueta del cuerpo:

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

Entonces prueba y ejecuta myfunction() si down es igual a 1:

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

Puedes combinar @Pax y mis respuestas para obtener también la duración durante la que el ratón ha estado inactivo:

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

Luego más tarde:

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

Necesita manejar el MouseDown y MouseUp y establecer alguna bandera o algo para rastrearlo "más tarde en el camino"... :(

Por debajo de jQuery ejemplo, cuando el ratón está sobre $('.elemento'), el color está cambiando dependiendo de qué botón del ratón se presiona.

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 se dijo @Jack, cuando mouseup sucede fuera de la ventana del navegador, no somos conscientes de ello...

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

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

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

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

Si está trabajando dentro de una página compleja con controladores de eventos del ratón existentes, le recomendaría manejar el evento en capture (en lugar de bubble). Para hacer esto, simplemente establezca el 3er parámetro de addEventListener en true.

Además, es posible que desee verificar event.which para asegurarse de que está manejando la interacción del usuario real 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 a document (o window) en lugar de document.el cuerpo es importante b / c se asegura de que los eventos mouseup fuera de la ventana todavía se registran.

Bueno, no se puede comprobar si está abajo después del evento, pero se puede comprobar si está arriba... Si está arriba.. esto significa que ya no está abajo: P lol

Entonces el usuario presiona el botón hacia abajo (evento onMouseDown) ... y después de eso, comprueba si está arriba (onMouseUp). Mientras no esté, 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 cross-browser funciona bien para mí.

Usando jQuery, la siguiente solución maneja incluso el "arrastre fuera 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 se como maneja múltiples botones del mouse. Si hubiera una manera de iniciar el clic fuera de la ventana, a continuación, llevar el ratón a la ventana, entonces esto probablemente no funcionaría correctamente allí tampoco.