vue 事件修饰符 stop capture once self prevent passive

stop 阻止点击事件继续传播阻止冒泡

capture 添加事件监听器时使用事件捕获模式自己子元素会触发添加了capture 修饰符的父元素的事件再处理子元素的事件逻辑

once 事件只触发一次

self 只有是自身元素时才会触发事件处理如果其子元素间接触发则不会触发

prevent 阻止默认行为如a标签点击会跳转添加prevent修饰符则不会进行跳转

passive 不阻止默认行为按照通俗的理解: 提前告诉浏览器这个事件有默认行为的话我不会阻止的,浏览器你就不要花费去想了直接触发吧（代码就不写了）

写代码看下具体结果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box-outer {
      width: 200px;
      height: 200px;
      border: 1px solid #000fff;
    }
    .box-inner {
      margin: 50px auto;
      width: 100px;
      height: 100px;
      background-color: #c9c0c9;
    }
  </style>
  <body>
    <div id="app">
        <!-- 外层盒子 -->
      <div class="box-outer" @click="clickOuter">
        <!-- 内层盒子 -->
        <div class="box-inner" @click="clickInner">
            <!-- a标签 -->
            <a @click="clickA" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js">跳转</a>
        </div>       
      </div>
    </div>
    <script type="module">
      import Vue from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js";

      const vm = new Vue({
        name: "HelloWorld",
        el: "#app",       
        methods: {
            clickOuter() {
            console.log('outer');
          },
          clickInner() {
            console.log('inner');
          },
          clickA() {
            console.log('a标签');
          },
        },
      });
    </script>
  </body>
</html>

1.如果不加任何修饰符的话点击a标签会跳转，点击内部盒子会先触发clickInner，

再触发clickOuter

2.a标签加上prevent修饰符时，点击不会跳转不做演示

扫描二维码关注公众号，回复： 16922714 查看本文章

3.添加once 修饰符后，则事件只触发一次

4.外层盒子加.self,点击内部盒子只触发了内部盒子回调外部盒子没触发回调

<div class="box-outer" @click.self="clickOuter">

5.内部盒子加.stop，阻止事件冒泡，点击内部盒子时只会触发内部盒子事件回调，不会触发外部盒子的事件回调（去掉了外部盒子上的self 之后也不会触发）

 <!-- 外层盒子 -->
   <div class="box-outer" @click="clickOuter">
        <!-- 内层盒子 -->
        <div class="box-inner" @click.stop="clickInner">
          <!-- a标签 -->
          <a
            @click="clickA"
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"
            >跳转</a
          >
        </div>
   </div>

6.外层盒子添加capture修饰符，改造代码增加一个最内层盒子增加点击事件点击时打印信息

点击最内层的盒子时发现会先触发外层有capture修饰符的盒子的事件回调，其次是自身的最后是没有加capture修饰符的外层盒子依次向外冒泡

 <div class="box-outer" @click.capture="clickOuter">
        <!-- 内层盒子 -->
      <div class="box-inner" @click="clickInner">
          <!-- a标签 -->
          <!-- <a
            @click="clickA"
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js"
            >跳转</a
          > -->
          <div class="box-iin" @click="clickIin">最内层盒子</div>
      </div>
  </div>

修饰符可以连续添加如click.prevent.self 顺序很重要，使用需注意

vue 事件修饰符 stop capture once self prevent passive

猜你喜欢