Noté este comportamiento extraño cuando hago lo siguiente:
<%= link_to(image_tag('some_image', class:"some_class", onclick:"someFunction(event)"),some_path) %> más tarde llamando a event.target; devuelve undefined . Investigué esto y es porque el event es image_tag en lugar de link_to .
así que supongo que mi pregunta es: ¿por qué sucede esto y cómo lo evito?
Terminé dividiendo el enlace y la imagen y poniendo onclick en link_to (obviamente no se puede hacer clic en la imagen y hay un botón feo debajo, solo por curiosidad, si hay una forma de evitar esto.
¡Gracias por adelantado!
Los eventos atraviesan el árbol dom, también conocido como burbujeo. target devuelve el elemento donde ocurrió el clic. currentTarget devuelve el elemento donde se adjunta la función del controlador.
<a onclick="clickable(event)" href="#"> <img src="/assets/sample.jpg"> <!-- if you click `img` --> </a> <script type="text/javascript"> function clickable(event){ console.log(event.target) <!-- this will return `img` --> console.log(event.currentTarget) <!-- this will return `a` --> } </script> <a onclick="clickable(event)" href="#"> <!-- if you click `a` --> <img src="/assets/sample.jpg"> </a> <script type="text/javascript"> function clickable(event){ console.log(event.target) <!-- this will return `a` --> console.log(event.currentTarget) <!-- this will return `a` --> } </script> Si necesita obtener el enlace, asegúrese de que onclick esté en el enlace y luego llame a currentTarget .
Esto agregará un enlace a la imagen y event.target será la imagen.
<%= link_to image_tag('some_image', class:"some_class"), some_path, onclick: "someFunction(event)" %>