Not possible to prevent events when navigating

[johnyvelho]

<a href="/my-url" use:link>
    <div>My other elements</div>
    <div>My other elements</div>
    <button on:click|preventDefault={() => console.log('button')}>Button</button>
</a>

When clicking on the button, the page will be redirected to the /my-url, even preventing this (event.preventDefault()).

[ItalyPaleAle]

Not sure why this happens. Try using <a href="#/my-url"> rather than the use:link, and try adding return false to the callback. See if they make a difference.

[johnyvelho]

hey @ItalyPaleAle,

Yeah, I did it to work around the problem for now. I will try to investigate it later and if possible send a PR to fix it.

Thanks for the awesome package!

[ItalyPaleAle]

Interesting. use:link binds a callback to the link. Which means that when you click on the button, the callbacks on both the a and button are called. Maybe you can try with the stopPropagation modifier too: on:click|preventDefault|stopPropagation?