事件修饰符

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

一。禁止默认事件(prevent) 1.原生js实现

<div class="a" @contextmenu="contextmenu"></div>

      new Vue({
    el: ".root",
    data: {},
    methods: {
      contextmenu(e) {
        e.preventDefault();
        console.log("右键菜单被禁止");
      },
    },
  });

2.prevent修饰符实现

①。使用前 ②。使用后

  <div class="a" @contextmenu.prevent="contextmenu"></div>

二。阻止事件冒泡(stop)

       事件冒泡：当子元素（事件源）事件触发，事件会沿着包含关系，依次往上级传递，每一级都可以感知到事件，直到触发根元素（根源)

1.js原生代码

   <div class="a" @click="clicka">
    <div class="b" @click="clickb"></div>
  </div>
  
   clicka() {
        console.log("A");
      },
      clickb(e) {
        e.stopPropagation();
        console.log("B");
      },

2.stop修饰符 ①。使用前

②。使用后

     <div class="a" @click="clicka">
    <div class="b" @click="clickb"></div>
  </div>

三。capture修饰符，将事件触发顺序等于捕获顺序 ①。使用前

②。使用后

           <!-- .capture，将事件触发顺序等于捕获顺序 -->
  <!-- 使用前点击b盒子，打印顺序为B，A -->
  <!-- 使用之后 点击b盒子，打印顺序为A，B -->
  <div class="a" @click.capture="clicka">
    <div class="b" @click="clickb"></div>
  </div>
</div>

四。once事件修饰符，设置事件方法只触发一次，注意：事件修饰符可以链式调用

      <button @click.once="x++">点我+1</button>

五。self事件修饰符，只在自身出发，在子元素无法触发 ①。使用前

②。使用后

<div class="root">
   <!-- self事件修饰符，只在自身出发，在子元素无法触发 -->
  <!-- 使用前点击b盒子会输出B，A，使用后只会输出B-->
  <div class="a" @click.self="clicka">
    <div class="b" @click="clickb"></div>
  </div>
</div>

六。按键修饰符

      Vue针对键盘事件，提供」按键修饰符
      一共有9个按键修饰符，分别是:
      enter 是回车键
      tab是tab键
      delete是删除键和退格键
      esc是退出键
      space是空格键
      up是上箭头
      down是下箭头
      left是左箭头
      right 是右箭头
      

1。例如

      <div class="root">
  <div>
    <!-- @keyup即按下键盘抬起触发 -->
    <!-- .enter  点击键盘enter -->
    <input type="text" v-model="search" @keyup.enter="searchs" />
  </div>
</div>


 methods: {
      searchs() {
        console.log(`正在搜索${this.search}`);
      },
    },