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

Entradas más populares de este blog

Instalar y configurar servidor Git con SSH en Ubuntu 12

Instalar VMware Workstation 8 en Ubuntu 12.04

Cuando el café te hace preguntarte si debes abrir una agencia o una consultoría