Tengo un solo div en una página. Tiene un controlador de eventos onclick . Cuando el usuario hace clic en ese div , espero que se llame al controlador de eventos. Pero también existe esta regla CSS: cuando ese div tiene un foco, se moverá 50 píxeles a la derecha (alejándose del puntero del mouse). Como resultado de esto, no se llama al controlador de eventos onclick , aunque el usuario claramente hizo clic en ese div al principio. Es como si el navegador primero aplicara CSS y solo después de eso decidiera en qué hizo clic el usuario.
Hice una demostración simple aquí: https://jsbin.com/yalazam/edit?html,css,console,output Haga clic en el cuadrado amarillo (que es el div ) en la cuarta columna y vea la consola en la tercera columna. Solo aparecerá un mensaje de "focus square" , pero no un "click square" .
¿Este comportamiento tiene algún sentido? ¿Hay algún caso en el que sea útil? ¿O debería simplemente aceptarlo como un comportamiento extraño del navegador?
El punto relevante aquí consiste en la definición de lo que es un evento de clic:
Un elemento recibe un evento de
clickcuando se presiona y se suelta un botón del dispositivo señalador (como el botón principal del mouse) mientras el puntero se encuentra dentro del elemento. Si se presiona el botón en un elemento y el puntero se mueve fuera del elemento antes de soltar el botón, el evento se activa en el elemento antepasado más específico que contenía ambos elementos.
Esto significa que, en su ejemplo, no se activa ningún evento de click en el div al que está apuntando, porque aunque la presión del mouse ocurre dentro de ese div, el lanzamiento ocurre después de que se haya movido (a menos que el usuario haga algo antinatural), por lo que no está dentro del mismo elemento. Un evento de click se activará en el body (que en su ejemplo es el "ancestro más específico" al que se hace referencia en MDN), pero eso no será muy útil para que lo escuche, porque un click en el body puede ocurrir en muchos de otras maneras, y no puede usar la propiedad de target del evento para ver dónde se originó, porque en este caso es el body mismo como se explica.
Si realmente necesita este efecto, use el evento mouseDown o mouseUp en lugar de click , según lo que le resulte más natural. Pero la respuesta real es no hacer esto, ya que es probable que sea inesperado para sus usuarios y los moleste.