滑鼠事件

LeoYao發表於2020-07-13

滑鼠事件種類

  • click 點選事件
  • dblclick 雙擊事件
  • mousedown 滑鼠按下按鍵
  • mouseup 滑鼠釋放按鍵
  • mousemove 滑鼠在某個節點內部移動時觸發
  • mouseenter 進入某個節點時觸發,進入節點後移動滑鼠不會觸發
  • mouseover 進入某個節點時觸發,進入子節點時會再次觸發
  • mouseout 離開某個節點時觸發,離開子節點也會觸發
  • mouseleave 離開某個節點時觸發,離開子節點不會觸發
  • contextmenu 按下右鍵觸發,或者按下上下文選單觸發
  • wheel 滾動滾輪時觸發

click 事件觸發

使用者先在同一個位置完成 mousedown,再完成 mouseup, 然後才會觸發 click.

dblclick 事件觸發

會在兩次 click 事件觸發後觸發

mouseover 和 mouseenter 區別

都會在進入一個節點時觸發,兩者的區別是,mouseenter 只觸發一次,而滑鼠在節點內部移動時,mouseover 會在子節點上觸發多次

mouseout 和 mouseleave 區別

都會在離開一個節點時觸發,兩者的區別是,mouseout 在離開一個子節點時會觸發,而 mouseleave 不會

滾輪的例項屬性

  • deltaX 表示滾輪的水平滾動量
  • deltaY 表示滾輪的垂直滾動量
  • deltaZ 表示滾輪的 Z 軸滾動量
  • deltaMode 表示上面三個屬性的單位,0 是畫素,1 是行,2 是頁
本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章