修饰符

@click='handleClick' 

@click='handleClick($event)' 

handleClick(e){
   // 这两种方法都可以拿到事件对象e,但是如果是handleClick()是拿不到e的
}

阻止事件冒泡 e.stopPropagation
阻止事件默认行为 e.preventDefault
return false;既可以阻止事件冒泡和事件默认行为

一、事件修饰符
@click.prevent 阻止事件默认行为
@click.stop 阻止事件冒泡

<div @click="buttonClick2">
  <div @click.stop="buttonClick">
    nice
    <div>123</div> 
  </div>
</div>
buttonClick() {
  alert(12);
},
buttonClick2(){
  alert(34);
}
当我点击了123会弹出12,因为阻止了事件冒泡,所以不会弹出34,当我点击nice的也是只弹出12

@click.self 只要点击的元素和绑定事件的元素是同一个元素才会触发,通过冒泡上来的事件不触发,但是不阻止事件向上冒泡

<div @click="buttonClick2">
    <div @click.self="buttonClick">
         nice
        <div>123</div>
    </div>
</div>
buttonClick() {
  alert(12);
},
buttonClick2(){
  alert(34);
}
当我点击123 是不会弹出12,因为使用了self修饰符,但是继续向上冒泡,所以弹出34,当我点击了nice会弹出12,且向上冒泡弹出34

@click.once 事件只执行一次
@click.capture事件执行按捕获的规则触发

image.png

先打印outer 在打印inner,如果不加capture 则会按冒泡的机制 先打印inner,在打印outer
二、按键修饰符 enter、 tab 、delete 、 esc
点击按键时,方法才会执行
@keydown.enter 在按下回车键的时候才会执行

三、系统修饰符 ctrl、alt、shift、meta
同时按下两个键的时候事件才会被执行
@keydown.ctrl 同时按下keydown和ctrl两个键的时候事件才会被执行
四.鼠标按键修饰符
right、left 、middle

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容