Tengo un panel de "más detalles" que se abre cuando un usuario pasa el mouse sobre una información sobre herramientas o hace clic en la información sobre herramientas con una pantalla táctil. Esto se logra simplemente a través de
tooltip.addEventListener('mouseenter', showPane);Me sorprendió lo fácil que fue, con mouseenter que parecía funcionar perfectamente para pasar el mouse por encima o tocar la pantalla táctil.
En este momento está cerrado con
tooltip.addEventListener('mouseleave', hidePane); tooltip.addEventListener('click', hidePane);Es decir, cualquier toque de pantalla o clic del mouse, o alejar el mouse (si el usuario tiene un mouse) del icono de información sobre herramientas cerrará el panel.
Esto puede ser un problema XY. Lo que quiero es tener un aviso para que el usuario acceda a MÁS detalles. Entonces, en el panel emergente "más detalles", tengo una línea "presione [1] para ver más" (1 con el estilo de una tecla del teclado). A menos que tengan una pantalla táctil y una pantalla lo suficientemente pequeña, en cuyo caso asumo que no tienen un teclado/mouse físico y les pido que "hagan clic aquí para ver más".
(Sé que esto no es perfecto, pero no puedo pensar en una mejor manera de lograrlo. Podría hacer que los usuarios del mouse tuvieran que hacer clic en la información sobre herramientas, por lo que la experiencia fue la misma para dispositivos móviles/PC/lo que sea, diseñándolo con un cursor de puntero, pero prefiero que funcione al pasar el mouse).
Todo funciona a la perfección, excepto por el enlace "haga clic aquí para ver más", que simplemente cierra la información sobre herramientas. No sé cómo excluir esos clics de los dos controladores de eventos hidePane . Cualquier ayuda apreciada, gracias!