鼠標事件

探索在JavaScript中處理鼠標事件的基礎

查看更多JavaScript事件

在查看鼠標事件時,我們可以與之交互

  • mousedown按下鼠標按鈕
  • mouseup釋放鼠標按鈕
  • click點擊事件
  • dblclick雙擊事件
  • mousemove當鼠標移到元素上時
  • mouseover當鼠標移到一個元素或其子元素之一上時
  • mouseenter當鼠標移到元素上時。如同mouseover但不會冒泡(稍後會詳細介紹!)
  • mouseout當鼠標移出元素時,以及當鼠標進入子元素時
  • mouseleave當鼠標移出元素時。如同mouseout但不會冒泡(稍後會詳細介紹!)
  • contextmenu打開上下文菜單時,例如,在鼠標右鍵上單擊

事件重疊。當您追踪一個click事件,就像跟踪mousedown跟一個mouseup事件。如果是dblclickclick也被解雇了兩次。

mousedownmousemovemouseup可以組合使用以跟踪拖放事件。

小心mousemove,因為它在鼠標移動過程中會多次觸發。我們需要申請節流,這是我們在分析滾動時會談論的更多內容。

在一個偶數處理程序中,我們可以訪問許多屬性。

例如,在發生鼠標事件時,我們可以通過檢查button事件對象的屬性:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

這是我們可以使用的所有屬性:

  • altKey如果在觸發事件時按了alt鍵,則為true
  • button如果有的話,則觸發鼠標事件時按下的按鈕編號(通常為0 =主按鈕,1 =中間按鈕,2 =右鍵)。對通過單擊按鈕引起的事件起作用(例如,單擊)
  • buttons如果有的話,一個數字,指示在任何鼠標事件上按下的按鈕。
  • clientX/clientY鼠標指針相對於瀏覽器窗口的x和y坐標,與滾動無關
  • ctrlKey如果在觸發事件時按了ctrl鍵,則為true
  • metaKey如果觸發事件時按下了meta鍵,則返回true
  • movementX/movementY鼠標指針相對於上一個mousemove事件的位置的x和y坐標。用於在移動鼠標時跟踪鼠標速度
  • region在Canvas API中使用
  • relatedTarget事件的次要目標,例如在移動時
  • screenX/screenY屏幕坐標中鼠標指針的x和y坐標
  • shiftKey如果在觸發事件時按下了Shift鍵,則為true

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: