vue-事件修饰符-详解（.prevent .stop .once .capture .self）

vue事件修饰符-详解

1. .prevent -------等于javascript的event.preventDefault()
   作用：阻止默认程序的运行

   <form @submit.prevent="SomeFunction"></form>
   

   单独submit点击后会自动进行提交等一系列操作，prevent就可以阻止这些操作，让上面这段代码乖乖执行我们分配给它的SomeFunction

2. .stop
   作用:阻止冒泡
   什么叫冒泡?冒泡就是子元素的事件传递到父元素，用以下代码为例，点击button后，触发inner-click，但是因为这个button在中间的这个middle里，同时也相当于我们点击了middle这个元素，也就是button的父元素。同理，也相当于点击了outer元素，也就是说执行了inner-click后再执行middle-click紧接着outer-click。这就叫做冒泡，一个从子元素向父元素传递事件的行为。

   <div id="app"> 
   　　<div class="outer" @click="outer-click"> 
   　　　　<div class="middle" @click="middle-click"> 
   　　　　　　<button @click="inner-click">点击我(^_^)</button>
       　　</div>
       </div> 
   </div>
   

   　　methods: { 
   　　　　inner: function () {
   　　　　　　 console.log('inner： 这是最里面的Button' )
   　　　　}, 
   　　　　middle: function () { 
   　　　　　　console.log('middle: 这是中间的Div' )
   　　　　}, 
   　　　　outer: function () { 
   　　　　　　console.log('outer: 这是外面的Div' )
   　　　　} 
   　　} 
   

   运行结果：

   inner： 这是最里面的Button
   middle: 这是中间的Div
   outer: 这是外面的Div
   

   .stop的存在就相当于阻止事件向父元素传递，保证只执行inner-cli

   <div id="app"> 
   　　<div class="outer" @click="outer-cli"> 
   　　　　<div class="middle" @click="middle-cli"> 
   　　　　　　<button @click.stop="inner-cli">点击我(^_^)</button>
       　　</div>
       </div> 
   </div>
   

   运行结果：

   inner： 这是最里面的Button
   

   同理.stop如果放在middle里面，那么输出结果为：

   	inner： 这是最里面的Button
   	middle: 这是中间的Div
   

3. .capture
   作用：打乱冒泡顺序，用以下代码为例，发生click事件时会优先去找你可以传递到的所有父元素中最后一个有.capture的元素（这里可以传递到middle和outer，最有一个有.capture的元素是outer），然后优先执行这个元素的事件，紧接着执行倒数第二个有.capture的事件（middle），最后再按照正常的冒泡顺序从自己开始往上执行未经执行的父元素的click事件

   <div id="app"> 
   　　<div class="outer" @click.capture="outer"> 
   　　　　<div class="middle" @click.capture="middle"> 
   　　　　　　<button @click="inner">点击我(^_^)</button>
       　　</div>
       </div> 
   </div>
   

   运行结果：

   outer: 这是外面的Div
   middle: 这是中间的Div
   inner： 这是最里面的Button
   

   Some More Examples:

   <div id="app"> 
   　　<div class="outer" @click="outer"> 
   　　　　<div class="middle" @click.capture="middle"> 
   　　　　　　<button @click="inner">点击我(^_^)</button>
       　　</div>
       </div> 
   </div>
   

   运行结果：

   middle: 这是中间的Div
   inner： 这是最里面的Button
   outer: 这是外面的Div
   

4. .self
   作用：不让子元素的事件触发自己绑定的事件，但是不会阻止冒泡！
   例子：

   <div id="app"> 
   　　<div class="outer" @click="outer"> 
   　　　　<div class="middle" @click.self="middle"> 
   　　　　　　<button @click="inner">点击我(^_^)</button>
       　　</div>
       </div> 
   </div>
   

   这里middle这里有一个.self，当我们点击button的时候，先执行inner，传递到middle，但是.self阻止了middle的cli事件，所以继续冒泡到outer,执行outer的click事件。
   运行结果：

   	inner： 这是最里面的Button
   	outer: 这是外面的Div
   

5. .once
   顾名思义，事件只会触发一次

   <button @click.once="inner">点击我(^_^)</button>
   

祝你好运！！！