Event Modifiers

Front-end frameworks like Vue.js provide the functionality of handling events in their own way. But they often clash or overlap with the browser’s default behavior. For example, when clicking on a link defined using the <a> tag, the browser will load the link in the current window automatically. When you define your own event listener on the <a> element, the bound function is executed followed by the browser’s default action. This is a nuisance usually and needs to be stopped. This behavior is demonstrated in the application shown below.

In the above example, observe that clicking on the “OK” button in the alert box makes it go away but the link is also loaded afterward. The function clicked that was defined in the methods is executed but the browser also performed the default action (loading the link address).

Modifying the default events

If you do not want the browser to trigger events on its own, it is achieved by using Vue event modifiers. These event modifiers add additional functionality to the event handlers such as preventing the default browser action or stopping the ...