Mouse events basics

Complex events

clickTriggers after mousedown and then mouseup over the same element if the left mouse button was used.dblclickTriggers after a double click over an element.
Complex events are made of simple ones, so in theory we could live without them. But they exist, and that’s good, because they are convenient.

Events order

An action may trigger multiple events.
For instance, a click first triggers mousedown, when the button is pressed, then mouseup and click when it’s released.
In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order mousedown → mouseup → click.

Coordinates: clientX/Y, pageX/Y

All mouse events have coordinates in two flavours:

1. Window-relative: clientX and clientY.
2. Document-relative: pageX and pageY.

For instance, if we have a window of the size 500x500, and the mouse is in the left-upper corner, then clientX and clientY are 0. And if the mouse is in the center, then clientX and clientY are 250, no matter what place in the document it is, how far the document was scrolled. They are similar to position:fixed.
Move the mouse over the input field to see clientX/clientY (the example is in the iframe, so coordinates are relative to that iframe):

Disabling selection

Double mouse click has a side-effect that may be disturbing in some interfaces: it selects the text.
For instance, a double-click on the text below selects it in addition to our handler:

<span ondblclick="alert('dblclick')">Double-click me</span>

If one presses the left mouse button and, without releasing it, moves the mouse, that also makes the selection, often unwanted.
There are multiple ways to prevent the selection, that you can read in the chapter Selection and Range.
In this particular case the most reasonable way is to prevent the browser action on mousedown. It prevents both these selections:

Before...
<b ondblclick="alert('Click!')" onmousedown="return false">
  Double-click me
</b>
...After