jQuery: Detectando pulsa el botón del ratón durante el evento MouseMove

Traté de detectar qué botón del ratón -si Any-es que el usuario presione durante un evento mousemove bajo jQuery, pero estoy consiguiendo resultados ambiguos:jQuery: Detectando pulsa el botón del ratón durante el evento MouseMove

no button pressed:  e.which = 1 e.button = 0 
left button pressed: e.which = 1 e.button = 0 
middle button pressed: e.which = 2 e.button = 1 
right button pressed: e.which = 3 e.button = 2

Código :

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 

<input id="whichkey" value="type something"> 
<div id="log"></div> 
<script>$('#whichkey').bind('mousemove',function(e){ 
    $('#log').html(e.which + ' : ' + e.button); 
}); </script> 

</body> 
</html>

¿Cómo puedo saber la diferencia entre el botón izquierdo del mouse presionado y ningún botón?

Fuente

2010-11-01 Sebastián Grignoli

Explique qué está tratando de hacer mejor. ¿Debería mouseenter y luego mousedown mouseup entonces resultado de mouse exit sin botón? ¿Qué pasa con mousedown luego mouseenter luego mouseexit luego mouseup? ¿Está preguntando si el mouse se mueve a través de la entrada, se registra el hecho de que no se presionó ningún botón? – Fresheyeball

Estoy tratando de resaltar el texto en la página. Cada palabra está en su propio lapso. El mouseover + botón izquierdo sobre un elemento span debe resaltarlo, mouseover + botón derecho debe iluminarlo. –

Puede escribir un poco de código para realizar un seguimiento del estado del botón izquierdo del mouse, y con una pequeña función puede preprocesar la variable de evento en el evento mousemove.

para realizar un seguimiento del estado de la LMB, se unen un evento para documentar el nivel de mousedown y mouseup y comprobar si hay e.which configurar o borrar la bandera.

El preprocesamiento se realiza mediante la función tweakMouseMoveEvent() en mi código. Para admitir las versiones de IE < 9, debe verificar si los botones del mouse se lanzaron fuera de la ventana y borrar la bandera si es así. Luego puede cambiar la variable del evento pasado. Si e.which era originalmente 1 (sin botón o LMB) y no se presiona el estado actual del botón izquierdo, simplemente configure e.which en 0, y úselo en el resto de su evento mousemove para verificar que no haya botones presionados.

El controlador mousemove en mi ejemplo simplemente llama a la función de ajuste pasando la variable de evento actual, luego da como resultado el valor de e.which.

$(function() { 
    var leftButtonDown = false; 
    $(document).mousedown(function(e){ 
     // Left mouse button was pressed, set flag 
     if(e.which === 1) leftButtonDown = true; 
    }); 
    $(document).mouseup(function(e){ 
     // Left mouse button was released, clear flag 
     if(e.which === 1) leftButtonDown = false; 
    }); 

    function tweakMouseMoveEvent(e){ 
     // Check from jQuery UI for IE versions < 9 
     if ($.browser.msie && !e.button && !(document.documentMode >= 9)) { 
      leftButtonDown = false; 
     } 

     // If left button is not set, set which to 0 
     // This indicates no buttons pressed 
     if(e.which === 1 && !leftButtonDown) e.which = 0; 
    } 

    $(document).mousemove(function(e) { 
     // Call the tweak function to check for LMB and set correct e.which 
     tweakMouseMoveEvent(e); 

     $('body').text('which: ' + e.which); 
    }); 
});

Pruebe una demostración en vivo aquí: http://jsfiddle.net/G5Xr2/

Fuente

2011-05-30 21:15:34 DarthJDG

Gracias, no pude entender por qué siempre era 0 en IE. –

buena solución. ¿Qué pasa si hay un evento mousedown en un elemento secundario? ¿Aún se disparará el evento de mousedown del documento? –

Olvídalo ... lo he probado, y funciona como un amuleto –

jQuery normaliza el valor which por lo que funcionará en todos los navegadores. Apuesto a que si ejecuta su script encontrará diferentes valores de e.button.

Fuente

2010-11-01 01:14:06 Mottie

Eso es lo que pensé. Tristemente, 'which' no me dice si el botón izquierdo está presionado o no. –

Creo que algunos eventos no procesan datos de botones como otros, intente agregar una variable global y cambiar su valor con un evento 'mousedown'. – Mottie

Aquí hay una demostración: http://jsfiddle.net/Mottie/ubgLA/ – Mottie

Esas variables se actualizan cuando el evento mousedown (entre otros) incendios; estás viendo el valor que queda de ese evento. Tenga en cuenta que they are properties of that event, no del propio ratón:

Descripción: Para los eventos de tecla o botón, este atributo indica el botón específico o la tecla que se ha pulsado.

No hay ningún valor para "no presionar ningún botón", porque el evento mousedown nunca se disparará para indicar que no se está presionando ningún botón.

Deberá mantener su propia variable [boolean] global y alternarla on/off en mousedown/mouseup.

Esto sólo funcionará si la ventana del navegador tenía enfoque cuando se pulsa el botón, lo que significa un enfoque interruptor entre el usuario presionando el botón del ratón y su cocción caso mousemove va a evitar que esto funcione correctamente. Sin embargo, no hay mucho que puedas hacer al respecto.

Fuente

2011-05-28 01:20:55

Por alguna razón, cuando se une a mousemove caso, la propiedad se establece en event.which1 si botón izquierdo o se pulsa ninguna.

me cambiaron a mousedown evento y que funcionaba bien:

izquierdo: 1
medio: 2
derecha: 3

Aquí está un ejemplo de trabajo: http://jsfiddle.net/marcosfromero/RrXbX/

El código jQuery es:

$('p').mousedown(function(event) { 
    console.log(event.which); 
    $('#button').text(event.which); 
});

Fuente

2011-06-01 02:46:32 marcosfromero

La mayoría de los navegadores (except Safari) *) apoyan ahora la MouseEvent.buttons propiedad (nota: "botón s" plural), que es 1 cuando se pulsa el botón izquierdo del ratón:

$('#whichkey').bind('mousemove', function(e) { 
    $('#log').html('Pressed: ' + e.buttons); 
});

https://jsfiddle.net/pdz2nzon/2

*) El mundo se está moviendo hacia adelante:
https://webkit.org/blog/8016/release-notes-for-safari-technology-preview-43/
https://trac.webkit.org/changeset/223264/webkit/

Fuente

2016-02-18 12:59:43 Sphinxxx

¡Esta respuesta debería ser la aceptada! Los navegadores de vendedores perezosos pueden obtener ayuda de: https://github.com/mikolalysenko/mouse-event – yckart

Llegó para agregar esta respuesta, porque otros no funcionan. De acuerdo, esto debería ser aceptado como respuesta. – BoB3K

A la fecha, las siguientes obras en Firefox 47, Chrome y Safari 54 10.

$('#whichkey').bind('mousemove',function(e){ 
    if (e.buttons & 1 || (e.buttons === undefined && e.which == 1)) { 
     $('#log').html('left button pressed'); 
    } else if (e.buttons & 2 || (e.buttons === undefined && e.which == 3)) { 
     $('#log').html('right button pressed'); 
    } else { 
     $('#log').html('no button pressed'); 
    } 
});

Fuente

2016-11-20 14:04:52

Para los usuarios que buscan una solución similar pero sin el uso de jQuery, aquí es una manera de cómo resolví mi problema:

canvas.addEventListener("mousemove", updatePosition_mouseNtouch); 

    function updatePosition_mouseNtouch (evt) { 
     // IF mouse is down THEN set button press flag 
     if(evt.which === 1) 
     leftButtonDown = true; 
     // If you need to detect other buttons, then make this here 
     // ... else if(evt.which === 2) middleButtonDown = true; 
     // ... else if(evt.which === 3) rightButtonDown = true; 
     // IF no mouse button is pressed THEN reset press flag(s) 
     else 
     leftButtonDown = false; 

     if (leftButtonDown) { 
     /* do some stuff */ 
     } 
    }

Espero que esto sea útil para alguien que busca una respuesta.

Fuente

2017-05-14 22:25:46

jQuery: Detectando pulsa el botón del ratón durante el evento MouseMove

Respuesta

Cuestiones relacionadas