Vue事件修飾符, capture關鍵字詳解

2022-09-15 05:36:08 字數 773 閱讀 3140

.prevent 用於阻止預設事件,點選a標籤href可以開啟相應的鏈結,那麼給事件加

上此關鍵字,click.prevent

.capture 冒泡順序

例如 div1中巢狀div2中巢狀div3

此處的**因為div2有capture關鍵字,所以此時冒泡的順序發生了改變

正常情況下:

點選div3一層一層冒泡,先div3=》div2=》div1

使用了關鍵字:

點選div3時,先div2=》div3=》div1

1.先冒泡外層帶有關鍵字的事件

2.外層執行結束之後,往裡層執行事件

3.最後按照從裡向外的事件開始執行

就是說只要存在乙個capture關鍵字,就會影響整個巢狀的執行

例子div1中巢狀div2中巢狀div3.capture中巢狀div4

此時點選div1

先執行帶有capture的div3

然後執行div4

最後按照從裡向外的順序執行

順序就是   div3=》div4=》div2=》div1

其他疑惑

此時巢狀為

div1中巢狀div2.capture中巢狀div3中巢狀div4

那麼可以想一下點選最裡層的div4會怎麼觸發呢

1.觸發帶有關鍵字的 div2

2.觸發點選的div4

3.最後從裡向外執行 

那麼順序為   div2=》div4=》div3=》div1

vue修飾符與事件修飾符

前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...

vue 事件修飾符

事件修飾符 在事件處理程式中呼叫event.preventdefault 或event.stoppropagation 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點,但更好的方式是 methods 只有純粹的資料邏輯,而不是去處理 dom 事件細節。為了解決這個問題,vue.js...

Vue事件修飾符

也可以只設定事件名和修飾符而不傳入偵聽器,而且可以將修飾符串聯起來使用。例如,下面這個例子會阻止單擊事件沿dom樹向下傳遞,但只在第一次觸發時有效 除了上述事件修飾符,還有一些按鍵修飾符。它們用在鍵盤事件上,只有在特定按鍵按下時才會觸發事件。看下面這個例子 上面這個例子中,if語句中的的 只有當ke...