vue 事件修饰符个人见解

亦凉 2022-04-14 02:20 198阅读 0赞

#### 事件修饰符总览 ####

*  stop : 阻止冒泡
 *  capture ： 捕获
 *  self ：点击自身才触发
 *  once ： 只触发一次
 *  prevent ：阻止默认事件

#### 综述 ####

例如下面代码中的各个嵌套的div，say()方法为弹窗显示所传入的参数。

<div id="app">
      <div @click="say('outter')">outter
        <div @click="say('middle')">middle
          <div @click="say('inner')">inner
    		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
    	  </div>	  
    	</div>
      </div>
    </div>
    
    <script> new Vue({ el: '#app', methods: { say: function (message) { alert(message) } } }) </script>

vue中点击内层的div时默认以冒泡的方式依次触发事件。即点击最内层inner时，会依次从内到外出发事件，此时点击inner后弹窗顺序为

inner

middle

outter

事件修饰符的作用即为控制这种事件的触发方式。

--------------------

#### stop ####

将div代码修改为,即在middle一层加上stop修饰。

<div @click="say('outter')">outter
    	  <div @click.top="say('middle')">middle
    	    <div @click="say('inner')">inner
    		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
    	    </div>	  
    	  </div>
    	</div>

此时，运行弹窗顺序为

inner

middle

middle弹窗后便停止，outter没有继续弹窗，所以称stop的功能为阻止冒泡。

--------------------

#### capture ####

capture 释义为捕获，其流程与冒泡相反，冒泡是从内至外，捕获为从外到内。  
修改代码为：

<div @click="say('outter')">outter
        <div @click.capture="say('middle')">middle
          <div @click="say('inner')">inner
    		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
    	  </div>	  
    	</div>
      </div>

此时点击inner的弹窗顺序为:

middle

inner

outter

在响应inner前，其外层middle先将点击事件捕获了，所以先触发middle。而outter没有修饰默认为冒泡所以在内层两个弹窗后弹窗。

--------------------

#### self ####

self 为响应自身时才可触发。  
修改代码为：

<div @click="say('outter')">outter
        <div @click.self="say('middle')">middle
          <div @click="say('inner')">inner
    		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
    	  </div>	  
    	</div>
      </div>

此时点击inner的弹窗顺序为:

inner

outter

其中middle被修饰为self，所以当点击inner时，向上冒泡时middle不被触发，直接跳到outter。此时只有点击middle时才可触发其点击事件。

--------------------

#### once ####

once 为只响应第一次，随后的便不响应。  
修改div代码为：

<div @click="say('outter')">outter
        <div @click.once="say('middle')">middle
          <div @click="say('inner')">inner
    		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
    	  </div>	  
    	</div>
      </div>

此时第一次点击inner时，弹窗顺序为：

inner

middle

outter

第二次点击inner时，弹窗顺序为：

inner

outter

即第二次触发middle时，事件被once修饰符过滤了。

--------------------

#### prevent ####

prevent 作用为阻止默认事件  
沿用上例代码：

a标签的默认事件为跳转进入href，增加click.prevent修饰后，当点击该链接时，并没有发生跳转而直接发生div的弹窗响应了。

--------------------

#### 代码 ####

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <div @click="say('outter')">outter
        <div @click="say('middle')">middle
          <div @click="say('inner')">inner
    		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
    	  </div>	  
    	</div>
      </div>
    </div>
    
    <script> new Vue({ el: '#app', methods: { say: function (message) { alert(message) } } }) </script>
    </body>
    </html>