Vue2教程 - 5 事件修饰符

前面介绍了可以使用 v-on 指令绑定事件。下面介绍一下事件修饰符。

5.1 +.stop

阻止冒泡。

<!-- 结构 -->
<template>
  <div id="root">
    <!-- 使用  .stop  阻止冒泡 -->
    <div @click="div1Handler">
      <button @click.stop="btnHandler">点我</button>
    </div>
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  methods: {  // // 这个methods属性中定义了当前Vue实例所有可用的方法
    div1Handler: function () {
      console.log("点击了div")
    },

    btnHandler: function () {
      console.log("点击了button")
    }
  },
}
</script>

如上面的代码，在一个div中有一个按钮，同时给div和按钮添加了点击事件，当点击按钮的时候，会先触发按钮的点击事件，然后再触发div的点击事件，事件是从内部元素向上冒泡的，如果想阻止触发div的点击事件，可以给按钮的点击事件添加 .stop 修饰符，阻止事件冒泡，这样就只会触发按钮的点击事件了。

5.2 +.prevent

阻止默认事件。

<!-- 结构 -->
<template>
  <div id="root">
    <!-- 使用 .prevent 阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="clickLink">有问题，先百度</a>
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  methods: {  // // 这个methods属性中定义了当前Vue实例所有可用的方法
    clickLink: function () {
      console.log("点击了链接")
    }
  },
}
</script>

在上面的代码中有一个 a标签 ，a标签 有一个默认事件是跳转到百度，如果想阻止跳转到百度，可以添加一个点击事件，并添加 .prevent 修饰符阻止 a标签 的默认事件。这样点击 a标签 只会调用点击事件的方法， 这样在方法中处理我们的逻辑就可以了。

使用同样的方式，也可以阻止表单的默认事件等。

5.3 +.capture

添加事件侦听器时使用事件捕获模式。

<!-- 结构 -->
<template>
  <div id="root">
    <!-- 使用 .capture 实现捕获触发事件的机制 -->
    <div @click.capture="div1Handler">
        <input type="button" value="点我" @click.stop="btnHandler">
    </div>
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  methods: {  // // 这个methods属性中定义了当前Vue实例所有可用的方法

    div1Handler: function () {
      console.log("点击了div")
    },

    btnHandler: function () {
      console.log("点击了button")
    }
  },
}
</script>

事件的默认传递是冒泡方式的，是从内部往外部传递的。如果想事件由外向内传递，可以使用 .capture 修饰符来实现捕获触发事件。在上面的代码中，在外部的div的点击事件上添加了.capture 修饰符，那么会先触发div的点击事件。

5.4 +.self

只当事件在该元素本身（比如不是子元素）触发时触发回调。

<!-- 结构 -->
<template>
  <div id="root">
    
    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <div class="inner" @click.self="div1Handler">
        <input type="button" value="点我" @click="btnHandler">
    </div>
    
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  methods: {  // // 这个methods属性中定义了当前Vue实例所有可用的方法

    div1Handler: function () {
      console.log("点击了div")
    },

    btnHandler: function () {
      console.log("点击了button")
    }
  },
}
</script>

在外部div元素的事件上添加 .self 修饰符后，只有在点击div本身才会触发div的事件，点击其中的元素不会触发div的事件。 .self 不能阻止内部事件的冒泡，当有多层元素嵌套时，点击了内部元素，本层元素添加了.self 修饰，则本层元素不会接受到事件，但是事件会继续冒泡到更外部元素。

.stop 是点击内部元素时，阻止事件向上传递，效果是点击外部元素本身才会触发外部元素的事件。

.self 也是点击外部元素本身才会触发外部元素的事件，那么 .stop 和 .self 什么区别呢？

.stop 是作用在子元素上的，只会阻止某一个子元素的事件不向上传递；而 .self 是作用在外部元素上的，那么内部所有元素的事件都不会触发外部元素的事件，只监听自身元素的事件。

5.5 +.once

事件只触发一次。

<!-- 结构 -->
<template>
  <div id="root">
    <!-- 使用 .once 只触发一次事件处理函数 -->
    <a href="http://www.baidu.com" @click.prevent.once="clickLink">有问题，先百度</a>
  </div>
</template>

<!-- 脚本 -->
<script>
export default {
  name: 'App',
  methods: {  // // 这个methods属性中定义了当前Vue实例所有可用的方法
    clickLink: function () {
      console.log("点击了链接")
    }
  },
}
</script>

使用 .once 只会触发一次函数处理，修饰符可以串联起来使用。

像上面的代码只会在点击 a标签 的第一次阻止默认事件，当再次点击 a标签 就不会阻止默认事件了，而是会跳转到百度。