1.简介

在javascript原生事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求，在vue中我们可以通过事件修饰符很轻松解决这两个问题。

• @click.capture   
• @click.stop ===> event.stopPropagation() 

2.通过图解理解什么是冒泡阻止和事件捕捉

• 事件冒泡：当我们点击div3区域的时候，div2和div3的事件也会依次执行
•  事件捕捉:在事件冒泡发生时，我们只想让某个div执行他的事件

3. 实现

 // 伪代码
 <div @click="toDO($event)" id="div1" :style="divStyleFirst">
      <div @click.capture="toDO($event)" id="div2" :style="divStyleTwo">
            <div @click.stop="toDO($event)" id="div3" :style="divStyleThree">
            </div>
      </div>
  </div>

    var vm = new Vue({
      el: '#app', // vm.$el ==> document.getElementById('example')
      data:obj,   // vm.$data ==> data
      methods: {
        toDO:function(e){
          console.log(e.currentTarget.id);
          alert(e);
        }
      },
      watch: {
          'firstname': function(newVal,oldValue){
              this.fullname = newVal + '-' + this.lastname
          },
          'lastname': function(newVal,oldValue){
              this.fullname = this.firstname + '-' + newVal
          }
      }
    })

4.注意 

值得注意的时如果我们在div2上使用.capture，在div3上使用.stop，点击div3的区域会发现先执行div2的事件在执行div3的事件，也就是可以理解为.capture的优先级>.stop