javascript - validar - saber si se dio click boton jquery
JavaScript: compruebe si el botón del mouse está desactivado (15)
¿Hay alguna manera de detectar si un botón del mouse está actualmente inactivo 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?
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;"
Luego prueba y ejecuta myfunction() si down es igual a 1 :
onmousemove="if (down==1) myfunction();"
Bueno, no puedes verificar si está caído después del evento, pero puedes verificar si es Up ... Si está activo ... significa que ya no está abajo: P lol
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á funcionando, puedes hacer lo que necesites.
Como dijo @Jack, cuando el mouseup ocurre fuera de la ventana del navegador, no lo sabemos ...
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 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 al mismo tiempo, suelta un botón del mouse y luego el otro, ambos fuera de la ventana del navegador.
Con respecto a la solución de Pax: no funciona si el usuario hace clic en más de un botón de forma intencionada o accidental. No me preguntes cómo lo 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 así:
if(mouseDown){
// crikey! isn''t she a beauty?
}
Si desea saber qué botón está presionado, prepárese para hacer que MouseDown sea una matriz de contadores y los cuente 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 advierta que el código anterior funcionaría solo para navegadores compatibles con estándares que le pasen un número de botón comenzando desde 0 en adelante. IE usa una máscara de bits de los botones actualmente presionados:
- 0 para "no se presiona nada"
- 1 por izquierda
- 2 por derecho
- 4 para el medio
- y cualquier combinación de arriba, por ejemplo, 5 para izquierda + centro
¡Así que ajuste su código en consecuencia! Lo dejo como un 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 los eventos del botón del mouse (onclick, onusedown y onmouseup), IE lo envía con onmousemove también. De modo que puede comenzar a escuchar Onmousemove cuando necesite conocer el estado del botón y comprobar si hay evt.button tan pronto como lo tenga: ahora 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 ella juega muerta y no se mueve.
Enlaces relevantes:
Actualización n. ° 1 : No sé por qué llevé el estilo de código document.body. Será mejor adjuntar controladores de eventos directamente al documento.
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.
}
Debajo del ejemplo de jQuery, cuando el mouse está sobre $ (''. Element''), el color cambia según el 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();
});
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, ocurrirá el evento mouseUp y cancelará la ejecución retrasada.
Aconsejo usar algún método para adjuntar eventos entre navegadores: configurar el mousedown y las propiedades del mouse se hizo explícitamente 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);
}
Esta es una vieja pregunta, y las respuestas parecen abogar principalmente por el uso de mousedown y mouseup para realizar un seguimiento de si se presiona un botón. Pero como otros han señalado, mouseup solo se mouseup 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(losbuttonsno estarán definidos para Safari). Nota:whichusa números diferentes de losbuttonspara clics derecho e intermedio.
Cuando se registra en el document , el mousemove se disparará inmediatamente tan pronto como el cursor vuelva a entrar en el navegador, por lo que si el usuario lo libera, el estado se actualizará tan pronto como vuelva a ingresar.
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.
Necesita manejar MouseDown y MouseUp y establecer alguna bandera o algo para seguirlo "más adelante en el camino" ... :(
Puede combinar @Pax y mis respuestas para obtener también la duración por la que el mouse 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);
}
Entonces despúes:
if (mousedown >= 2000) {
// do something if the mousebutton has been down for at least 2 seconds
}
Sé que esta es una publicación anterior, pero pensé que el rastreo del botón del mouse con el mouse hacia arriba / hacia abajo era 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 tenía que 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 de forma predeterminada.
Puede usar cualquier cosa en el objeto devuelto por getComputedStyle que pueda usar como indicador sin alterar el aspecto de su página, por ejemplo, color de borde.
Me hubiera gustado establecer mi propio estilo definido por el usuario en la sección: activo, pero no pude lograr que funcionara. Sería mejor si fuera posible.
Si está trabajando en una página compleja con manejadores de eventos de mouse existentes, le recomendaría manejar el evento en la captura (en lugar de burbuja). Para hacer esto, simplemente configure el 3er parámetro de addEventListener en true .
Además, es posible que desee comprobar si hay event.which que garanticen que está manejando 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 a document (o window) en lugar de document.body es importante b / c asegura que los eventos de mouseup fuera de la ventana todavía se graban.
Usando jQuery, la siguiente solución maneja incluso el "arrastre de la página y luego suelta el estuche".
$(document).mousedown(function(e) {
mouseDown = true;
}).mouseup(function(e) {
mouseDown = false;
}).mouseleave(function(e) {
mouseDown = false;
});
No sé cómo maneja varios botones del mouse. Si hubiera una manera de iniciar el clic fuera de la ventana, luego inserte el mouse en la ventana, entonces esto probablemente tampoco funcionaría correctamente allí.
la solución no es buena uno podría "mousedown" en el documento, luego "mouseup" fuera del navegador, y en este caso el navegador seguiría pensando que el mouse está caído.
la única buena solución es usar el objeto IE.event.
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í.