Quiero mostrar una imagen debajo del mouse (un dedo para simular una pantalla táctil) cuando ocurre un evento mousedown y ocultarla cuando ocurre el evento mouseup, pero cuando hago esto, la imagen que muestro bloquea los eventos posteriores del mouse ("hacer clic " en particular) en elementos debajo de esta imagen. Estoy usando jQuery, por cierto.
Estoy seguro de que esto tiene algo que ver con el burbujeo o la propagación de eventos o algo así, pero no pude resolverlo. ¿Algún consejo, por favor?
Echa un vistazo a esta respuesta a en esta publicación:
https://stackoverflow.com/a/4839672/589909
Parece hacer lo que entiendo, lo que quiere lograr utilizando un enfoque CSS de navegador cruzado puro.
pointer-events:none; touch-action:none;
Billy Moon, tu código casi funcionaba. Solo tienes que usar ocultar y mostrar en lugar de css:
$('#finger').click(function(e){ evt = e || window.event; // make finger disappear $('#finger').hide(0); // get element at point of click starter = document.elementFromPoint(evt.clientX, evt.clientY); // send click to element at finger point $(starter).click(); // bring back the finger $('#finger').show(0); });Esto no se ha probado, pero se basa en un script de trabajo mío, por lo que debería estar en la línea correcta. Básicamente, tienes que hacer que la capa que está en medio desaparezca por un momento, para que puedas usar el método elementFromPoint y luego hacer que vuelva.
$('.selector').click(function(e){ evt = e || window.event; // make finger disappear $('.finger').css({display:'none'}); // get element at point of click starter = document.elementFromPoint(evt.clientX, evt.clientY); // send click to element at finger point $(starter).click(); // bring back the finger $('.finger').css({display:''}); });