03-v-on的事件修饰符

v-on的事件修饰符

v-on的常见事件修饰符

v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：

  • .stop 阻止冒泡。本质是调用 event.stopPropagation()。

  • .prevent 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。

  • .capture 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。

  • .self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。

  • .once 事件只触发一次。

  • .{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时，才触发回调。

  • .native 监听组件根元素的原生事件。

PS：一个事件，允许同时使用多个事件修饰符。

写法示范：

  1.           <!-- click事件 -->
  2.         <button v-on:click="doThis"></button>
  4.         <!-- 缩写 -->
  5.         <button @click="doThis"></button>
  7.         <!-- 内联语句 -->
  8.         <button v-on:click="doThat('hello', $event)"></button>
  10.         <!-- 阻止冒泡 -->
  11.         <button @click.stop="doThis"></button>
  13.         <!-- 阻止默认行为 -->
  14.         <button @click.prevent="doThis"></button>
  16.         <!-- 阻止默认行为，没有表达式 -->
  17.         <form @submit.prevent></form>
  19.         <!--  串联修饰符 -->
  20.         <button @click.stop.prevent="doThis"></button>

.stop的举例

我们来看下面这个例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         .father {
  12.             height: 300px;
  13.             width: 300px;
  14.             background: pink;
  15.         }
  17.         .child {
  18.             width: 200px;
  19.             height: 200px;
  20.             background: green;
  21.         }
  22.     </style>
  23. </head>
  25. <body>
  26.     <div id="app">
  27.         <div class="father" @click="fatherClick">
  28.             <div class="child" @click="childClick">
  29.             </div>
  30.         </div>
  31.     </div>
  32.     <script>
  34.         var vm = new Vue({
  35.             el: '#app',
  36.             data: {},
  37.             methods: {
  38.                 fatherClick: function () {
  39.                     console.log('father 被点击了');
  40.                 },
  41.                 childClick: function () {
  42.                     console.log('child 被点击了');
  43.                 }
  44.             }
  45.         })
  47.     </script>
  48. </body>
  50. </html>

上方代码中，存在冒泡的现象，父标签中包含了一个子标签。当点击子标签时，父标签也会被触发。打印顺序是：

  1.   child 被点击了
  2.   father 被点击了

那么问题来了，如果我不想让子标签的点击事件冒泡到父亲，该怎么做呢？办法是：给子标签加一个事件修饰符.stop，阻止冒泡。代码如下：

  1.     <div class="child" @click.stop="childClick">

阻止冒泡后，当点击子标签时，打印结果是：

  1.   child 被点击了

PS：我发现一个有意思的现象。上方的这行代码中，如果把.stop改为:stop，造成的现象是，父标签被触发了，而子标签没有被触发。

.capture举例

.capture：触发事件时，采用捕获的形式，而不是冒泡的形式。

还是采用上面的例子：当按钮点击时，如果想要采取捕获的方式，而不是冒泡的方式，办法是：可以直接在父标签上加事件修饰符.capture。代码如下：

  1.     <div class="father" @click.capture="fatherClick">

当点击子标签时，打印结果是：

  1.   father 被点击了
  2.   child 被点击了

.prevent的举例1

比如说，超链接<a>默认有跳转行为，那我可以通过事件修饰符.prevent阻止这种跳转行为。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <!-- 通过 .prevent 阻止超链接的默认跳转行为 -->
  15.         <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
  16.     </div>
  17.     <script>
  19.         var vm = new Vue({
  20.             el: '#app',
  21.             data: {},
  22.             methods: {
  23.                 linkClick: function () {
  24.                     console.log('超链接被点击了');
  25.                 }
  26.             }
  27.         })
  28.     </script>
  29. </body>
  31. </html>

上方代码中：

  • 如果去掉.prevent，点击按钮后，既会打印log，又会跳转到百度页面。

  • 现在加上了.prevent，就只会打印loeg，不会跳转到百度页面。

.prevent的举例2

现在有一个form表单：

  1.     <form action="http://www.baidu.com">
  2.       <input type="submit" value="表单提交">
  3.     </form>

我们知道，上面这个表单因为type="submit"，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。

现在，我们可以用.prevent来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Document</title>
  7.   <script src="vue2.5.16.js"></script>
  8. </head>
  10. <body>
  11.   <div id="app">
  12.     <!-- 阻止表单中submit的默认事件 -->
  13.     <form @submit.prevent action="http://www.baidu.com">
  14.       <!-- 执行自定义的click事件 -->
  15.       <input type="submit" @click="mySubmit" value="表单提交">
  16.     </form>
  18.   </div>
  19. </body>
  21. <script>
  22.   new Vue({
  23.     el: '#app',
  24.     data: {
  25.     },
  26.     methods: {
  27.       mySubmit: function() {
  28.         alert('ok');
  29.       }
  30.     }
  31.   });
  32. </script>
  34. </html>

上方代码中，我们通过.prevent阻止了提交按钮的默认事件，点击按钮后，执行的是mySubmit()方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为submit，反正默认的submit已经失效了。

.self举例

  • .self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。

我们知道，在事件触发机制中，当点击子标签时，父标签会通过冒泡的形式被触发（父标签本身并没有被点击）。可如果我给父标签的点击事件设置.self修饰符，达到的效果是：子标签的点击事件不会再冒泡到父标签了，只有点击符标签本身，父标签的事件才会被触发。代码如下：

  1.     <div class="father" @click.self="fatherClick">

疑问：既然.stop和.self都可以阻止冒泡，那二者有什么区别呢？区别在于：前者能够阻止整个冒泡行为，而后者只能阻止自己身上的冒泡行为。