iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0

按鍵修飾符號

  • 昨天提到的系統修飾符號,只需要滿足條件就會觸發,以滑鼠按下事件為例,只要滿足使用者按Control鍵的時候按滑鼠按鍵,就會觸發事件,即讓使用者同時按了其他按鍵也不會受影響,例如:同時按了Shift+Control+滑鼠左鍵的組合按鍵。
  • 如果想要精準地進行按鍵修飾,可以使用exact修飾符號,使用這個修飾符號修飾後,只有準確地滿足按鍵的條件才會觸發事件,例如:
<div @mousedown.ctrl.exact="mousedown">滑鼠按下</div>
  • 這段程式碼透過exact修飾後,在使用Shift+Control+滑鼠左鍵的組合方式操作時,就不會再觸發事件函數了。
  • 前面介紹了鍵盤按鍵相關的修飾符號,Vue中還有3個常用的滑鼠按鍵修飾符號。在進行網頁應用開發時,通常左鍵用來選擇,右鍵用來設定,透過下面這些修飾符號可以設定當使用者按了滑鼠指定的按鍵後才會觸發事件函數:
left
right
middle

例如下面這段範例程式,只有按了滑鼠左鍵才會觸發事件:

<div @click.left="click">點擊事件</div>

今天就先到這邊囉,明天將會進行一個實作!


上一篇
Day 7
下一篇
Day 9
系列文
從零開始學習TypeScript、Vue.js !!10
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言