The difference between stopPropogation and preventDefault
February 2, 2019
Earlier this week I got tripped up with the differences between
preventDefault(). In this specific project I was using the Vue.js event modifiers (
.prevent). Hopefully this quick example can save you a few minutes in the future.
<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.
prevent will prevent the browsers default action is halted, but the click event can still bubble up to the parent tag.