vue十 vue基礎之事件修飾符和按鍵修飾符

2022-07-07 12:51:12 字數 1225 閱讀 9757

一:事件修飾符

官網對事件修飾符說明:

冒泡場景:當觸發li上的點選事件的時候,會一直往上找,找到ul的事件

解決方法

第一種方法:js處理方式,把事件傳給函式,在函式中阻止冒泡

第二種方法:vue提供的事件修飾符.stop

使用.prevent事件阻止預設行為,如跳轉或提交表單的場景,

使用.self,當只有點選本身這個標籤時才會觸發事件,如果是子孫元素冒泡上來的,不會觸發此事件

在父元素上使用.self

點選ul

.once:只能觸發一次

222333

點選跳轉

二: 按鍵修飾符

此時的情況是按下任何按鍵都會觸發,如果想要控制按下指定的按鍵才觸發事件,

方法一:使用按鍵的鍵值,如回車鍵的鍵值是13

方法二:事件修飾符

由於按鍵修飾符並沒有提供所有按鍵,所以同樣也支援鍵值

Vue指令之事件修飾符

stop 阻止冒泡 prevent 阻止預設事件 capture 新增事件偵聽器時使用事件捕獲模式 self 只當事件在該元素本身 比如不是子元素 觸發時觸發 once 事件只觸發一次 div class box click divhandler input type button value 戳他...

vue 事件修飾符

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

Vue事件修飾符

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