Vue event modifiers prevent vs. stop

2020-03-01 16:46发布

问题:

Reading the Vue documentation about events, they mention the event modifiers like prevent or stop. They mention that on stop: <!-- the click event's propagation will be stopped -->. I am assuming this will stop the event from bubbling. What about prevent. What does it exactly do? I am assuming it will prevent the event from being triggered twice (on a double click for example). Are these assumptions correct? I just couldn't find more specific info on the web.

What I read:

  • https://vuejs.org/v2/guide/events.html
  • How to prevent/stop propagation of default event (click) in directive (vue 2.x)

回答1:

.prevent or event.preventDefault() – It stops the browsers default behaviour (A example is reload when you hit <button type="submit"> in <form>)

.stop or event.stopPropagation() – It prevents the event from propagating (or “bubbling up”) the DOM

.once - The event will be triggered at most once