pasar example evento event jquery

example - mouseout jquery



jQuery: Detectando el botón del mouse presionado durante el evento mousemove (7)

Traté de detectar qué botón del mouse (si hay alguno) está presionando el usuario durante un evento mousemove en jQuery, pero obtengo resultados ambiguos:

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 diferenciar entre presionar el botón izquierdo del mouse y no presionar ningún botón?

A partir de la fecha, lo siguiente funciona en Firefox 47, Chrome 54 y Safari 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''); } });

Esas variables se actualizan cuando el evento mousedown (entre otros) dispara; estás viendo el valor que queda de ese evento. Tenga en cuenta que which , no del mouse en sí:

Descripción: para eventos de tecla o botón , este atributo indica el botón específico o la tecla que se presionó.

No hay ningún valor para "no presionar ningún botón", porque el evento de 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 solo funcionará si la ventana del navegador se enfocó cuando se presionó el botón, lo que significa que un interruptor de enfoque entre el usuario presionando el botón del mouse y el mousemove evento mousemove evitará que esto funcione correctamente. Sin embargo, no hay mucho que puedas hacer al respecto.

Para los usuarios que buscan una solución similar pero sin el uso de JQuery, aquí hay una forma 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.

Por alguna razón, al enlazar al evento mousemove , la propiedad event.which se establece en 1 si se presiona el botón izquierdo o no se presiona ninguno.

Cambié al evento mousedown y funcionó bien:

  • izquierda: 1
  • medio: 2
  • Derecha: 3

Aquí hay 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); });

Puede escribir un poco de código para hacer 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, enlace un evento al nivel de documento para mousedown y mouseup y verifique para que se establezca o borre la bandera.

El preprocesamiento lo realiza la función tweakMouseMoveEvent() en mi código. Para admitir las versiones 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 a 0 , y use eso en el resto de su evento mousemove para verificar que no se presionen botones.

El manejador de mousemove en mi ejemplo simplemente llama a la función tweak pasando por la variable de evento actual, luego emite 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/

jQuery normaliza el valor para que funcione en todos los navegadores. Apuesto a que si ejecuta su script encontrará diferentes valores de e.button.