vue click阻止事件冒泡与默认行为

阻止事件冒泡

 <div  @click="click1()" >
             <a @click="click2()"></a>
  </div>
  
  //正确写法
   <div  @click="click1()" >
             <a @click.stop="click2()"></a>
  </div>
  

export default {
  name: "Home",
  data() {
    return {}
    },
    methods{
       click1(){
           alert('div事件')
       },
       click2(){
          alert('div内a标签的事件')
       },
    }
  }

若要阻止事件冒泡，只需将a标签中的@click 改成@click.stop 即可
这样点击a标签事件时不会触发外层div的事件

阻止默认行为

<div >
    <button type="button" value="按钮" @contextmenu="show()">点我</button >
</div>

//正确写法

<div >
    <button type="button" value="按钮" @contextmenu.prevent="show()">点我</button >
</div>

export default {
  name: "Home",
  data() {
    return {}
    },
    methods{
       show(){
           alert('button事件')
       },
    }
  }

在上面的代码中，button元素绑定了一个contextmenu事件，单击鼠标右键会触发该事件，并调用show()方法
此时浏览器窗口不仅会出现alert弹框，还会出现浏览器默认的菜单选项
若要阻止默认行为，只需将@contextmenu 改成@contextmenu.prevent 即可