Cuando un evento de mousedown y mouseup no es igual a un clic

Question

He estado usando algunos botones desde hace un tiempo que tienen un efecto deprimido al hacer clic usando una posición relativa y una parte superior: 1px en: pseudoclase activa .

Tuve problemas con los eventos de clic que no se activan y resultó ser que los eventos mouseup y mouseup no activaban el mismo elemento. Hice un poco de toqueteo para asegurarme de que el elemento más interno cubriera todo el botón y descubriera que el problema persistía.

Si hago clic derecho en la parte superior del texto, el enlace salta hacia abajo (disparando el evento de mousedown) y luego hacia atrás (disparando el evento mouseup) pero el clic no ocurre. Si hago clic muy bien en el medio del texto o muy lejos del texto, todo está bien.

Lo único que se me ocurre aquí es que el evento mousedown se activa en el textNode y el mouseup se activa en el elemento de anclaje ya que el textNode ya no se encuentra debajo del cursor. Atrapar los objetos del evento y mirar los objetivos usando Firebug indica que este no es el caso, pero realmente no puedo pensar en otra explicación. Leyendo un poco puedo encontrar alguna mención de los eventos disparando en textNodes en Safari, pero nada acerca de esta discrepancia.

El siguiente fragmento debería permitirle replicar el problema. Recuerde, usted debe hacer clic derecho en la parte superior del texto, o de un pixel o dos por encima, y ​​este problema sólo se produce con una fila de píxeles:

<style> 
a.button-test { 
display: inline-block; 
padding: 20px; 
background: red; 
} 
.button-test:active { 
position: relative; 
top: 1px; 
} 
</style> 
<a class="button-test" href="#">Clickedy click</a> 

jugar un poco con el CSS, no usar inline-block, aumentar la altura de la línea en lugar del relleno, etc. no parece tener un efecto aquí. He intentado muchas combinaciones. La mayoría de mis pruebas se han realizado en Firefox para permitirme enlazar a los eventos y registrar lo que está pasando a través de Firebug, pero también encuentro este problema en otros navegadores.

¿Alguien tiene alguna inspiración que puedan ofrecer en este otro que perder el salto activo? Realmente me gustaría mantener este efecto si puedo.

Muchas gracias,

Dom (sin doble sentido)

Answer 1

Es mucho más fácil de reproducir este problema si cambia el estilo de superior: 10px

Answer 2

aquí está mi solución usando un evento personalizado con jQuery

var buttonPressed; 
// Track buttonPressed only on button mousedown 
$(document).on('mousedown', 'button', function (e) { 
    // Make sure we store the actual button, not any contained 
    // element we might have clicked instead 
    buttonPressed = $(e.target).closest('button'); 
}); 
// Clear buttonPressed on every mouseup 
$(document).on('mouseup', function (e) { 
    if (buttonPressed) { 
     // Verify it's the same target button 
     var target = $(e.target).closest('button'); 
     if (target.is(buttonPressed)) { 
      buttonPressed.trigger('buttonClick'); 
     } 
     buttonPressed = null; 
    } 
}); 

$('button').on('buttonClick', function (e) { 
    // Do your thing 
}); 

Sólo asegúrese de que no se manejan tanto el clic nativo y eventos ButtonClick.