摘要：若按下之後，鼠標移動使得指針離開該元素，那麼事件將會在包含兩個元素的最近祖先元素（the most specific ancestor element）上觸發。與 click 相關的事件都具有  which  屬性，該屬性允許用戶獲知具體哪個鼠標按鈕被按下。

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

mousedown/mouseup
mouseover/mouseout
mousemove
contextmenu

複雜事件類型則有以下幾種：

click
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表示右鍵。

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

參考

相關文章