Even when you move the mouse one pixel, the mousemove event still fires. The mousemove event fires repeatedly when you move the mouse cursor around an element. If you register both click and dblclick event handlers on the same element, you will not know exactly what user actually has clicked or double-clicked the element. The dblclick event has four events fired in the following order:Īs you can see, the click events always take place before the dblclick event.

It takes two click events to cause a dblclick event to fire. The dblclick event fires when you double click over an element. In practice, you rarely use the dblclick event. In both cases, the click event never fires. Likewise, if you depress the mouse button, move the mouse over the element, and release the mouse button, the only mouseup event fires on the element. The only mousedown event fires on the element. If you depress the mouse button on an element and move your mouse off the element, and then release the mouse button.

The click fires when one mousedown and one mouseup detected on the element.

The mouseup fires when you release the mouse button on the element.

The mousedown fires when you depress the mouse button on the element.

When you click an element, there are no less than three mouse events fire in the following sequence: DOM Level 3 events define nine mouse events. Mouse events fire when you use the mouse to interact with the elements on the page.

Summary: in this tutorial, you will learn about the basic mouse events and their properties in JavaScript.

Javascript mouse coords