Mouse event interoducation – click, contextmenu, dblclick, mousemove, mousedown, mouseup, mouseover, mouseout

JavaScript also provides the support for the mouse related events like click, contextmenu, dblclick, mousemove, mousedown, mouseup, mouseover and mouseout.

click:

• click event trigger when user hit single left click on any element.
• It will trigger after the mousedown and then mouseup event over the same element.

contextmenu:

• contextmenu event trigger when user hit right click on any element.
• It will trigger after the mousedown and then mouseup event over the same element.

dblclick:

• dblclick trigger when user double click on any element.

mousedown:

• mousedown will trigger when the mouse button is click over an any element.

mouseup:

• mouseup will trigger when the mouse button is released over an any element.

mouseover:

• mouseover will trigger when the mouse pointer comes over the any element.

mouseout:

• mouseout will trigger when the mouse pointer goes out from the any element.

mousemove:

• When mouse move over any element, mousemove event will be trigger.

Event Order

So when we click on the any element it will trigger the multiple events.

Event sequence:

click: mousedown -> mouseup -> click.

contextmenu: mousedown -> mouseup -> contextmenu.

dblclick: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick.

Example:

HTML:

<input type="button" value="Signle click, Double click, Right click here." id="btnClick" />
<input type="button" value="Clear" id="btnClear" /><br /><br />
<textarea style="width:300px; height: 200px;" id="txtMessages"></textarea>

JS:

var btnClick = document.getElementById("btnClick");
var btnClear = document.getElementById("btnClear");
var txtMessages = document.getElementById("txtMessages");

btnClear.onclick = function (event) {
        txtMessages.value = "";
}

btnClick.onmousedown = function (event) {
        txtMessages.value += "mousedown\n";
        txtMessages.scrollTop = txtMessages.scrollHeight;
};

btnClick.onmouseup = function (event) {
        txtMessages.value += "mouseup\n";
        txtMessages.scrollTop = txtMessages.scrollHeight;
};

btnClick.onclick = function (event) {
        txtMessages.value += "click\n\n";
        txtMessages.scrollTop = txtMessages.scrollHeight;
};

btnClick.ondblclick = function (event) {
        txtMessages.value += "dblclick\n\n";
        txtMessages.scrollTop = txtMessages.scrollHeight;
};

btnClick.oncontextmenu = function (event) {
        event.preventDefault();
        txtMessages.value += "contextmenu\n\n";
        txtMessages.scrollTop = txtMessages.scrollHeight;
};

Mouse Events Live Demo

Know which mouse button is click

We can easily know that which button is click, because when user press mouse left button than the click event will be trigger and when user press mouse right button than the contextmenu event will be trigger.

But the mousedown and mouseup event is trigger on both left and right press of the mouse button. So at the time of the mousedown and mouseup we not clear about which button is click.

We can get the which button is click using the event object. event object have the which property that tell us the which mouse button is pressed.

event.which property provides the value between 1 to 3.

1 – Mouse left button is clicked.
2 – Mouse middle button is clicked.
3 – Mouse right button is clicked.

HTML:

<input type="button" value="Click to know which button is clicked." id="btnClick" />
<input type="button" value="Clear" id="btnClear" /><br /><br />
<textarea style="width:300px; height: 200px;" id="txtMessages"></textarea>

JS:

var btnClick = document.getElementById("btnClick");
var btnClear = document.getElementById("btnClear");
var txtMessages = document.getElementById("txtMessages");

btnClear.onclick = function (event) {
        txtMessages.value = "";
}

btnClick.onmousedown = function (event) {
        txtMessages.value += "event.which = " + event.which + "\n";
        txtMessages.scrollTop = txtMessages.scrollHeight;
};

btnClick.oncontextmenu = function (event) {
        event.preventDefault();
}

Which Mouse Button Is Clicked Live Demo