3

I notice Google use onMouseDown in their search results - for web tracking, seeing keyword and ranking etc.

I want to know which is better, onClick or onMouseDown - or do they both support all of the following: middle button, left click, right click (other buttons like Gamer mouse). Are they supported in all browsers including those on mobile phones, tablets and all other operating systems? It is paramount that the function loads first. HREF is left for SEO and other UI/UX benefits in case of failure of javascript.

<a href="http://www.site.com" onclick="doMyFunctionFirst();">
JavaScript loaded before the href URL
</a>

Or

<a href="http://www.site.com" onMousedown="doMyFunctionFirst();">
JavaScript loaded before the href URL
</a>

Or the seemingly obvious (I do not do this as every character for space matters for my client)

<a href="http://www.site.com" onclick="doMyFunctionFirst();" onMouseDown="doMyFunctionFirst();">
JavaScript loaded before the href URL
</a>
tkone
  • 22,092
  • 5
  • 54
  • 78
TheBlackBenzKid
  • 26,324
  • 41
  • 139
  • 209
  • 2
    One reason to use `onmousedown` instead of `onclick` is that former gives you noticeably (like 0.4s) faster responce. – dfsq Jan 30 '12 at 17:04
  • @dfsq citation needed... – Domenic Jan 30 '12 at 17:08
  • Can find the article where I saw the number but even simple logic says that `mousedown` fires faster. Click is fired only after mousedown and mouseup. – dfsq Jan 30 '12 at 17:15
  • @dfsq Yes but I doubt most people's up-down time deltas are anywhere near 0.4s. It also fires false positives in cases when you just put your mouse down but then release elsewhere on the page. – Domenic Jan 30 '12 at 17:20
  • 1
    In my Phonegap+jQuery Mobile application switching to `mousedown` is really noticable. So it depends I guess on the how heavy code is, hardware, etc. – dfsq Jan 30 '12 at 17:23
  • 1
    http://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/ – dfsq Jan 30 '12 at 17:26
  • @dfsq Nice, the mobile case appears to be different. Thanks for teaching me things! (Although the link seems to recommend using the touch events instead of the mouse ones as the solution.) – Domenic Jan 30 '12 at 17:31
  • Does this apply to ALL browsers and ALL os @dfsq – TheBlackBenzKid Jan 31 '12 at 10:09

3 Answers3

4

Notably, the click event will fire if you tab to a link and press Enter, but the mousedown/mouseup will not.

Domenic
  • 110,262
  • 41
  • 219
  • 271
  • Seems strange, as you would expect people to tab between links and then press enter on the one they wish to visit - unless Google are using it for tracking links only. – TheBlackBenzKid Jan 31 '12 at 10:21
1

The main difference is that while onmousedown triggers regardless of which mouse-button was pressed, onclick triggers only for the left mouse button - which will be most likely what you want.

techfoobar
  • 65,616
  • 14
  • 114
  • 135
-1

The W3C spec doesn't seem to specify whether the events should fire for all buttons, only that the button pressed should be indicated on the "button" property of the event object. Under Chrome at least it doesn't appear that "click" fires for anything except the main (in my case, left) mouse button. Quirksmode has a useful test harness to check this.

The onclick, onmousedown and onmouseup represent different behaviours, none of which is intrinsicly "better": a "click" is a press and then release of the button, mousedown is the "down" and mouseup is the "release". Normally this would be relevant if you were doing some drag/drop operations.

The MDN documentation indicates that onclick fires after mousedown and mouseup.

Also, ideally you should be attaching event handlers using Unobtrusive Javascript techniques, rather than in the markup.

HREF is left for SEO and other UI/UX benefits in case of failure of javascript.

If the event handler is doing a redirect/AJAX request or similar, you should use the preventDefault method if you don't want the browser to follow the link after firing your event.

Chris Cooper
  • 869
  • 2
  • 18
  • 42