事件修饰符:
-
.stop
阻止事件冒泡
-
.prevent
阻止默认事件
-
.capture
事件捕获
-
.self
将事件绑定到自身
-
.once
只会触发一次
例:解决弹窗touch滚动body问题
//弹窗遮罩层
<div class="dialog" @touchstart.prevent="close()" @touchmove.prevent="">
//弹窗内容层
<div class="box" @touchstart.stop=""></div>
</div>
//1、@touchstart.prevent="close()"关闭弹窗,此时触摸弹窗内容层也会导致弹窗关闭
//2、@touchstart.stop=""阻止冒泡,防止触摸时触发父级元素时间,但此时触摸移动内容层会导致body滚动
//3、@touchmove.prevent=""阻止默认事件,避免触摸移动时导致body滚动
此方法适用于弹窗内部无滚动区域的情况,如在弹窗内部存在滚动区域,须在滚动区域添加@touchmove.stop=""。此时,在ios系统中存在触摸滚动区域(内容没有超出滚动区时)会导致body滚动,暂未解决
按键修饰符:
-
.enter
-
.tab
-
.delete
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right