preface

Vue. Js official website explains

Calling event.preventDefault() or event.stopPropagation() in the event handler is a very common requirement. While this could easily be done in a method, it’s better if the method has pure data logic instead of dealing with DOM event details.

To solve this problem, vue.js provides event modifiers for V-Ons. As mentioned earlier, modifiers are represented by an instruction suffix beginning with a dot.

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
  • .native
<! -- Prevent the click event from propagating -->
<a v-on:click.stop="doThis"></a>

<! Submit events no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<! -- modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>

<! -- only modifiers -->
<form v-on:submit.prevent></form>

<! Add event listener with event capture mode
<! Events triggered by an inner element are processed here before they are processed by the inner element.
<div v-on:click.capture="doThis">.</div>

<! Trigger handler only if event.target is the current element itself -->
<! -- that is, events are not triggered from internal elements -->
<div v-on:click.self="doThat">.</div>

<! Binding events directly to child components cannot be triggered.
<children @click="click"><children/> 
<! Native is used to bind events to the root element of the child component so that it can be triggered by clicking on it.
<children @click.native="click"><children/>
Copy the code

When using modifiers, order is important; The corresponding code is generated in the same order. Therefore, using V-on :click.prevent. Self blocks all clicks, whereas V-on :click.self. Prevent only blocks clicks on the element itself.

Deep understanding of

The preventDefault and stopPropagation

  • preventDefault: Blocks the default event
  • stopPropagation: Prevents events from bubbling

.stop

The function is the same as stopPropagation to prevent events from bubblers.

<div class="outer" @click="outer">
  outer
  <div class="inner" @click.stop="inner">
    inner
  </div>
</div>
Copy the code

I’ll hit inner output

.prevent

PreventDefault works as preventDefault to preventDefault events.

<form action="">
  <button @click.prevent="submit">
    submit
  </button>
</form>
Copy the code

Clicking the Submit button at this point will not refresh the page.

.capture

Enable event capture mode

<div class="outer" @click.capture="outer">
  outer
  <div class="inner" @click="inner">
    inner
  </div>
</div>
Copy the code

I’ll hit inner output

Series modifier

<div class="outer" @click.capture.stop="outer">
  outer
  <div class="inner" @click="inner">
    inner
  </div>
</div>
Copy the code

Click on theinnerThe output

.self

This will only happen if you click on the element itself

<div class="outer" @click.self="outer">
  outer
  <div class="inner" @click="inner">
    inner
  </div>
</div>
Copy the code

I’ll hit inner output

.once

<div class="outer" @click.once="outer">
  outer
  <div class="inner" @click="inner">
    inner
  </div>
</div>
Copy the code

.passive

Vue also provides the.passive modifier for the Passive option in the addEventListener.

  • What is a passive

    A boolean value that, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. See Improving scrolling performance with passive listeners to learn more

<! The default behavior of the scroll event (that is, the scroll behavior) will be triggered immediately --> <! Instead of waiting for 'onScroll' to finish --> <! -- this includes' event.preventdefault () '--> <div V-on :scroll. Passive ="onScroll">... </div>Copy the code

The.passive modifier is especially useful on mobile.

Do not use.passive with.prevent, as.prevent will be ignored and the browser may show you a warning. Remember that.passive tells the browser that you do not want to block the event’s default behavior.

See the Vue website for more modifiers