vue事件修饰符的使用

如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。

在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：

<div id="app">
  <div class="outer" @click="outer">
    <div class="middle" @click="middle">
      <div class="inner" @click="inner"></div>
    </div>
  </div>
  <input type="text" @keydown.f1="prompt" />
</div>

Vue.config.keyCodes = {
  f1: 112,
};
let app = new Vue({
  el: "#app",
  data() {
    return {};
  },
  methods: {
    inner: function () {
      console.log("inner：这是最里面盒子");
    },
    middle: function () {
      console.log("middle: 这是中间的盒子");
    },
    outer: function () {
      console.log("outer: 这是外面的盒子");
    },
    prompt: function () {
      alert("我是 F1");
    },
  },
});

1.stop

.stop相当于在每个方法中调用了event.stopPropagation()，点击子元素不会捕获到父元素的事件，也就阻止事件冒泡

2.prevent

.prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。

3.capture

当有冒泡发生时，有该修饰符的dom元素会优先执行，如果有多个，则会从外向内（按照有>无capture修饰符的顺序）执行。

4.self

只会触发自身的事件，不会触发父元素或子元素的事件。

5.once

设置事件只能发生一次。

6.native

在父组件中给子组件绑定一个原生的事件，将子组件变成了普通的HTML标签，不加’. native’事件是无法触发的

7.stop与self的区别

它们都有阻止冒泡的功能。
.stop 阻止事件向外冒泡，当给了子级.stop后它的父级就不会触发相关的点击事件
.self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
注意：
当子元素的点击事件使用stop时，父元素的点击事件不会触发，但父元素的双击事件会触发
当你双击时，相应的先触发单击事件再触发双击事件，即单击=>双击。
为了区分单双击事件，可以对点击的次数做记录，也可以自定义一些方法。

vue事件修饰符