鼠標事件

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

查看更多JavaScript事件

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

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

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

mousedown，mousemove和mouseup可以組合使用以跟踪拖放事件。

小心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初學者手冊


更多瀏覽器教程：


在線技術維基！