🔰mouse event

🚧 under construction

browser ⟩ event ⟩ type ⟩ mouse

• contextmenu – mouse right-clicks on an element.

• mouseover/mouseout – mouse cursor comes over / leaves an element.

• mousedown/mouseup – mouse is pressed / released over an element.

• mousemove – mouse is moved.

• click – fires after "mouseup".

• dblclick – fires after second "click".

🗺️ 圖表

mouse event coordinates

👉 compare：Element+boxes

Element+boxes

🧨 雷區

If you tap the screen, you’ll get

• touch events："touchstart", "touchend", then

• mouse events："mousedown", "mouseup", "click"❗

👥 相關

• box models

• touch event

• drag event

• 👉 Element+boxes

💈範例

• mouse event coords - compare .client/.page/.screenXY

📗 參考

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Mouse Clicks

📘 手冊

• Event ⟩ UIEvent ⟩ MouseEvent ⟩

  • (.screenX, .screenY) - relative to whole screen.

  • (.pageX, .pageY) - relative to document.

  • (.clientX, .clientY) - relative to viewport.