事件修飾符:
-
.stop
阻止事件冒泡
-
.prevent
阻止默認事件
-
.capture
事件捕獲
-
.self
將事件綁定到自身
-
.once
只會觸發(fā)一次
例:解決彈窗touch滾動body問題
//彈窗遮罩層
<div class="dialog" @touchstart.prevent="close()" @touchmove.prevent="">
//彈窗內(nèi)容層
<div class="box" @touchstart.stop=""></div>
</div>
//1伦腐、@touchstart.prevent="close()"關(guān)閉彈窗读处,此時觸摸彈窗內(nèi)容層也會導(dǎo)致彈窗關(guān)閉
//2榆骚、@touchstart.stop=""阻止冒泡臀玄,防止觸摸時觸發(fā)父級元素時間钧舌,但此時觸摸移動內(nèi)容層會導(dǎo)致body滾動
//3挟伙、@touchmove.prevent=""阻止默認事件办铡,避免觸摸移動時導(dǎo)致body滾動
此方法適用于彈窗內(nèi)部無滾動區(qū)域的情況钥飞,如在彈窗內(nèi)部存在滾動區(qū)域凌蔬,須在滾動區(qū)域添加@touchmove.stop=""露懒。此時,在ios系統(tǒng)中存在觸摸滾動區(qū)域(內(nèi)容沒有超出滾動區(qū)時)會導(dǎo)致body滾動砂心,暫未解決
按鍵修飾符:
-
.enter
-
.tab
-
.delete
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right