The difference between stopPropogation and preventDefault

February 2, 2019

Earlier this week I got tripped up with the differences between stopPropagation() and preventDefault(). In this specific project I was using the Vue.js event modifiers (.stop and .prevent). Hopefully this quick example can save you a few minutes in the future.

Example

<a href="/some/location">
    <img src="path-to-image.jpg" @click.stop="functionName"/>
</a>

Give the following markup, stopPropagation() or the Vue.js .stop on the will prevent the click event on the img element from bubbling up the parent anchor tag.

Using prevent will prevent the browsers default action is halted, but the click event can still bubble up to the parent tag.