freecoding.school100% FREE · NO SIGNUP
The Old NetISSUE #47 of 60

mouse events · click · mousemove · mouseover

Pixel PeteVSQuirks Mode
Pixel Pete saysMouse events — click, dblclick, mousedown/up/move, mouseover/out — drive pointer interaction.

The mouse family: click, dblclick, mousedown/mouseup, mousemove, and mouseover/mouseout (which bubble) vs mouseenter/mouseleave (which don't). Read position via clientX/Y or offsetX/Y. For touch-friendly code, prefer Pointer Events which unify mouse and touch under one model.

Power-ups you unlock

Quirks Mode attacks — common mistakes

Boss battleTrack the pointer position inside a box on mousemove.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="box" style="height:100px;background:#140a28"></div><pre id="o"></pre>
<script>document.getElementById('box').addEventListener('mousemove',e=>document.getElementById('o').textContent='x='+e.offsetX+' y='+e.offsetY);</script></body></html>
▶ Open the interactive comic issue
‹ Event Object · Target · Type · PreventDefaultKeyboard Events · Keydown · Keyup · Key Codes ›