Javascript - event target vs currentTarget
Me encontraba trabajando en un proyecto con un módulo de notas y necesitaba añadir un lightbox effect a las imágenes, como el componente usa Vue y solo aplicaba a las imágenes (una nota puede tener múltiples tipos de archivos), decidí usar solo JavaScript.
Bajo este contexto necesitaba usar el evento y por ende el target, la idea era simple:
• Identificar si la nota tenía imágenes
• Si era imagen lanzar el lightbox
• Si no era imagen abrir el enlace
La estructura era algo similar a:
<a @click="openAttachment($event)" href="/attachment.png" target="blank">
<img src="/thumbail.png" />
</a>
Entonces tenía un enlace que al hacerle clic ejecutaba una función que se encargaba de detectar si era imagen o no, si lo era llamaba a otra funciona que abría el lightbox.
Para detectar si era imagen o no, solo tenía la url, así que la detención seria en base a la extensión. Y aquí el motivo del post, al hacer clic en la miniatura se lanza el evento en el enlace y target es la imagen y lo que necesito es el href del enlace.
Entonces en el ejemplo de arriba:
event.target = img
event.currentTarget = a
Algo simple, pero útil para tener en cuenta.
Comentarios
Publicar un comentario