.stop is used to prevent events from bubbling, and .prevent is used to prevent default behavior. 1. Use .stop such as @click.stop to prevent the button click event from bubbled to the outer div; 2. Use .prevent such as @submit.prevent to prevent the form from submitting the default; 3. You can use multiple modifiers such as @click.stop.prevent at the same time, and the order will not affect the effect; be careful to avoid abuse, non-dynamic binding modifiers, and only use them when applicable.

In Vue.js, event modifiers are a very practical feature, especially modifiers like .stop and .prevent , which can help you quickly handle common DOM event behavior without writing additional JavaScript code.

What are .stop and .prevent

These two are event modifiers provided by Vue:

• .stop : prevents events from bubbled (equivalent to event.stopPropagation() )
• .prevent : Block the default behavior (equivalent to event.preventDefault() )

They can be added directly behind v-on command and are very simple to use.

For example:

 <a v-on:click.stop="doSomething">Click me</a>

The above example prevents click events from bubble upwards.

How to use .stop correctly to prevent events from bubbled

Sometimes you may encounter this situation: one element is nested in another element, and both are bound to the click event. For example, if a button is on a card, you want to only trigger the button event when you click the button, and not trigger the click of the card.

You can use .stop at this time:

 <div @click="handleCardClick">
  <button @click.stop="handleButtonClick">Click me</button>
</div>

In this way, when clicking the button, the handleCardClick function of the outer div will not be triggered.

Note: .stop will only affect the currently bound events and will not affect other logic or communication between components.

When should .prevent be used to block default behavior

Some HTML elements have default behaviors, such as <a> tag jumps, form submissions, etc. If you want to control these behaviors through Vue instead of directly executing the browser's default actions, you can use .prevent .

Let's give a simple example:

 <form @submit.prevent="handleSubmit">
  <input type="text" />
  <button type="submit">Submit</button>
</form>

After adding .prevent here, the form will not automatically refresh the page, but will be handed over to the handleSubmit method for processing.

Tips: .prevent is especially suitable for preventing repeated submissions of forms or intercepting before verification.

Can multiple modifiers be used at the same time?

sure! Vue supports chain calls to multiple modifiers. For example, if you want to stop both bubbles and default behavior, you can write this:

 <a @click.stop.prevent="customHandler">Don&#39;t jump or bubble</a>

The order does not affect the effect, but it is generally recommended to write in logical order to facilitate reading by yourself and others.

Common misunderstandings and precautions

• Don't abuse .prevent : Sometimes, default behavior is useful, such as the jump function of <a> . There is no need to block it unless you really need to customize the behavior.
• Modifiers cannot be bound dynamically : unlike data, they can be controlled by variables. Modifiers are written dead and can only be decided by code whether to add them.
• Not all events have default behavior or bubble mechanisms : such as custom events or certain synthetic events, it is meaningless to add .prevent or .stop at this time.

Basically that's it. The rational use of .stop and .prevent can allow you to write less native event processing code and express your intentions more clearly.

The above is the detailed content of How to use event modifiers like .stop or .prevent?. For more information, please follow other related articles on the PHP Chinese website!