DHTML

Mouse input

The MouseEvent object keeps information of events related with pointing device like mouse and touchpad. Below list of most useful events.

<div style="width: 60px; height: 60px; 
      border: 1px solid red;"
    onclick="alert('hi, i clicked')" />
event typedescription
click Some primary button has been pressed and released on an element.
contextmenu The right button of the mouse is clicked.
mousedown Button is pressed on an element.
mouseup A pointing device button is released over an element.
mouseenter Cursor is moved onto the element.
mouseleave Cursor is moved off the element.
mousemove Cursor is moved over the element.
mouseover Cursor is moved onto the element or onto one of its children.
mouseout Cursor is moved off the element or off one of its children.
wheel A wheel button is rotated.

MouseEvent properties

propertydescription
button Number of pressed button, possible values are:
  • 0 - main button pressed (usually the left button)
  • 1 - auxiliary button pressed (usually the wheel button or the middle button)
  • 2 - secondary button pressed (usually the right button)
  • 3 - fourth button (usually the browser back button)
  • 4 - fifth button (usually the browser forward button)
clientX Horizontal coordinate of cursor in clients coordinates.
clientY Vertical coordinate of cursor in clients coordinates.
screenX Horizontal coordinate of cursor in screen coordinates.
screenY Vertical coordinate of cursor in screen coordinates.
altKey Boolean value indicating whether the "ALT" key has been pressed.
ctrlKey Boolean value indicating whether the "CTRL" key has been pressed.
shiftKey Boolean value indicating whether the "Shift" key has been pressed.
metaKey Boolean value indicating whether the "meta" key has been pressed.