onmousedown vs onclick

This may seem like a stupid post to some of you, but personally I never quite understood the need for all those click events to exist (onmouseup,onmousedown,onclick). Only the circumstances under which those events occured were slightly different. Recently, I watched a speech at the Yahoo! Videos by Joseph Smarr titled “High-performance JavaScript: Why Everything You’ve Been Taught Is Wrong”. He suggested some changes in the way JS is used and one of them was the replacement of the onclick event by onmousedown. Inspired by this, I am going to present the results by some “experiments” that took place in my lab :P .

    1)When Are Those Events Triggered?

Obviously, onmousedown is triggered when the user presses on one of the mouse buttons, onmouseup when he releases one of them and onclick when the user clicks somewhere. But hey! Clicking is done in 2 steps! Firstly, the user presses the mouse button and then he releases it. So when is the onclick event actually triggered? It turns out that it’s triggered only after the user has released his mouse button. But hey! That is the onmouseup event! Even though it may seem logical, things are a bit different. The onmouseup event is triggered only when the mouse button is released. For example, you have an HTML button with an onmouseup listener attached to it. You can click anywhere on the page and while having your mouse button pressed, drag the pointer on that HTML button. Then release the mouse button and the event will be triggered. With the onclick event, however, the user must have his pointer on the HTML button when his presses his mouse button and also must have his pointer on the HTML button when he releases his mouse button. Therefore, someone can assume that onclick is something like a combination of the onmousedown and onmouseup events. This, also, explains the reason why the order the events take place is: onmousedown-onmouseup-onclick

    2)How could this affect my code?

Since onclick is the combination of the two events, it takes a certain amount of time before the programmer’s defined function in the onclick event will be run. This amount equals to the time the user needs to press the mouse button and release it. The following code is an attempt to measure that time:

<html>
<head><title>onmousedown vs onclick</title></head>
<body>
<form>
<input type="button" value="Click Me" onmousedown="start();return false;" onmouseup="end();return false" />
</form>
<script type="text/javascript">
var startt;
var endt;
function start() {
	var now = new Date();
	startt = now.getMilliseconds() + now.getSeconds()*1000;
}
function end() {
	var now = new Date();
	endt = now.getMilliseconds() + now.getSeconds()*1000 - startt;
}
</script>
</body>
</html>

It turns out that a “fast” click takes about 20-30ms and a “normal” click about 70-120ms and sometimes more. This means that at least 70-80ms will be spared before the actual function will run!

    3)Cons of the onmousedown event

Even though the onmousedown event saves you all this time each time something is clicked it doesn’t allow the user to “regret” for his action. For example, by the nature of the onclick event, a user can click on an HTML button, and while this button is pressed, regret for his action. He can then drag the mouse out of that HTML button and then release the mouse button and nothing will happen. Personally, I believe that Chit-Chat users don’t do this often. And even if they somethimes do, most parts of our site somehow provide an undo action. For example: Comments, Frelations, Albums, Questions and so on.

Except for that, I have a feeling that onmousedown is not fully compatible with IE. I wasn’t yet able to test this out, but I will soon.

I hope you learnt something from this post :)

2 Responses to “onmousedown vs onclick”

  1. kostis90gr says:

    I would like to add, that sometimes, due to event bubbling, you should prefer to attach an onmousedown event handler to an element, so that you can quickly cancel bubbling on onclick/onmouseup events of parent or child elements.

  2. Sasha says:

    what about that onmousedown is fire even with pressing scroll on mouse?

Leave a Reply