En una aplicación Svelte, intento detectar cuándo el usuario se desplaza sobre un enlace, dentro de un div . Agregué un detector de eventos mouseover al div y estoy comprobando si el elemento es un enlace, pero esto es demasiado simplista: no detecta enlaces que contienen etiquetas HTML.
Código de ejemplo, también disponible como REPL :
<script> import { onMount } from 'svelte'; let container; onMount(() => { container.addEventListener('mouseover', async (event) => { if (event.target.tagName !== 'A') return; console.log(event.target.attributes['href'].value); }); }); </script> <div bind:this={container}> <a href="https://www.example.com">Hello World</a> <a href="https://www.example.com"><strong>Hello World</strong></a> </div> El problema es ese segundo enlace: al pasar el cursor sobre él, el objetivo es la etiqueta strong , no la etiqueta a . Entonces, ¿cómo puedo detectar de manera confiable todos los enlaces dentro del contenedor div sin tener que agregar un detector de eventos a cada enlace individual?
Desde el destino, use .closest('a') para navegar hasta el elemento <a> adjunto, si lo hay. (Si el elemento al que se envió el evento es un <a> , se devolverá).
container.addEventListener('mouseover', (event) => { const a = event.target.closest('a'); if (a) console.log(a.href); }); container.addEventListener('mouseover', (event) => { const a = event.target.closest('a'); if (a) console.log(a.href); }); <div id="container"> <a href="https://www.example.com">Hello World</a> <a href="https://www.example.com"><strong>Hello World</strong></a> </div>En lugar de vincular el contenedor a una variable y configurar el oyente dentro de onMount, también puede configurarlo en Svelte directamente en el elemento como este
<script> function handleMouseover() { const a = event.target.closest('a') if(a) console.log(a.href); }; </script> <div on:mouseover={handleMouseover}> <a href="/path">Hello World</a> <a href="https://www.example.com"><strong>Hello World</strong></a> </div>