鼠標事件基礎回顧

鼠標事件基礎回顧

回到圖形化編輯器的開發上,當用戶添加文字、圖片或者任何其他素材時,選中、取消選中以及成組等復雜操作是必不可少的功能之一,這里要用的便是鼠標事件了。簡單鼠標事件類型分以下幾類:

  • mousedown/mouseup:事件在指針設備按鈕按下時/釋放時觸發。

  • mouseover/mouseout:事件在指針設備進入/離開一個元素時觸發。

  • mousemove:事件在指針設備移動于一個元素上時觸發。

  • contextmenu:事件在嘗試打開上下文菜單時觸發。通常,這會在按下鼠標右鍵時發生,當然還有一些特殊鍵盤鍵可以觸發此事件,因此其并非完全為鼠標事件。

復雜事件類型則有以下幾種:

  • click:如果使用鼠標左鍵,則在 mousedown 及 mouseup 相繼觸發后觸發該事件。

  • dblclick:事件在對元素進行雙擊后觸發。

需要注意的是,復雜事件是由簡單事件組成的,即一個動作可能會觸發多個事件。比如,在按下鼠標按鈕時,單擊會首先觸發 mousedown,釋放鼠標按鈕時觸發 mouseup 和 click。在單個動作觸發多個事件時,它們的順序是固定的。也就是說會遵循 mousedown → mouseup → click 的順序;而雙擊的觸發順序則為 mousedown → mouseup → click→ mousedown → mouseup → click→ dblclick

如果按照常用的操作習慣來處理,我們肯定希望我們的編輯器在選中內容的同時支持多選,而這個時候除了鼠標事件外我們還要捕獲一些具體按鍵,比如 Ctrl 鍵。常見的鼠標事件都會在接口對象上掛有如下幾個屬性用于輔助判斷:

屬性 類型 描述
ctrlKey boolean 當事件被觸發時ctrl按鍵被按下時為true,否則為false。
shiftKey boolean 當事件被觸發時shift按鍵被按下時為true,否則為false。
altKey boolean 當事件被觸發時alt按鍵被按下時為true,否則為false。
metaKey boolean 當事件被觸發時meta按鍵被按下時為true,否則為false。

當然,一個編輯器在選中時可能還要對具體點擊了元素的哪個位置進行計算,從而做不同響應,這個時候接口對象的如下幾個屬性既可以派上用場:

屬性 類型 描述
target  EventTarget 事件對應的 DOM 樹頂級頂級元素
currentTarget  EventTarget 掛載監聽器的節點
screenX  long 全局屏幕坐標系下鼠標指針的 X 軸坐標值
screenY  long 全局屏幕坐標系下鼠標指針的 Y 軸坐標值
clientX  long 當前(DOM 元素)坐標系下鼠標指針的 X 軸坐標值
clientY  long 當前(DOM 元素)坐標系下鼠標指針的 Y 軸坐標值

關于 click 事件存在一些細節,咬文嚼字一下:

  • 事件需要在按下和釋放操作時,指針設備都位于元素內。若按下之后,鼠標移動使得指針離開該元素,那么事件將會在包含兩個元素的最近祖先元素(the most specific ancestor element)上觸發;

  • 與 click 相關的事件都具有 which 屬性,該屬性允許用戶獲知具體哪個鼠標按鈕被按下。我們不會將其用于 click和 contextmenu 事件,因為前者只發生在左鍵,而后者只發生在右鍵。 which 有三個枚舉值,1 表示左鍵,2表示中間按鈕,3表示右鍵。

一些基礎知識,回顧一下。

來源:黯曉,本文觀點不代表自營銷立場,網址:http://www.wfapiao.com/p/9671

侵權聯系
返回頂部
AV天堂日本AV天堂欧美AV天堂