JS: detect right click without jQuery (inline)

Question

I'm calling a function, that builds a table which includes several links.

I want to check if a link has been clicked with right or left mouse.

I tried to add the following part to the <a> hyperlink.

onmousedown="function mouseDown(e){
switch (e.which) {
   case 1: alert('left'); break;
   case 2: alert('middle'); break;
   case 3: alert('right'); break; }
}"

But nothing happens If I click on a link.

Don't use intrinsic event handler attributes. Use DOM event binding instead. — Quentin, Feb 29 '12 at 14:37
I've tried, but it did not work for me. Maybe because the table is loaded later (and does not appear in source code of the rendered page) — Keith L., Feb 29 '12 at 14:44

score 15 · Accepted Answer · edited Oct 03 '15 at 10:34

15

The html:

<a href="#" onmousedown="mouseDown(event);">aaa</a>

The javascript:

function mouseDown(e) {
  e = e || window.event;
  switch (e.which) {
    case 1: alert('left'); break;
    case 2: alert('middle'); break;
    case 3: alert('right'); break; 
  }
}

The demo.

edited Oct 03 '15 at 10:34

Davide Pastore

8,678
10
39
53

answered Feb 29 '12 at 14:27

xdazz

158,678
38
247
274

2

I'm pretty sure that depending on the global event object makes this IE-only – Quentin Feb 29 '12 at 14:28
2

chrome: yes, firefox: no, IE9: no :\ – Keith L. Feb 29 '12 at 14:32
4

Somewhat ironic that Chrome is implementing anti-features for compatibility with IE-only sites at the same time as IE is removing them. – Quentin Feb 29 '12 at 14:36
@Quentin Fixed the answer, using jQuery make me miss such thing like this. – xdazz Feb 29 '12 at 15:02
I've tried with IE and I'm getting the "e", but there's not `keycode` inside. `keycode` is `0`, but `button` has values. I think, this is IE specific "`keycode`", because it's always the same number (left click: 1, middle click: 4, right click: 2). Is this correct? – Keith L. Feb 29 '12 at 15:24
okay, I've checked it. `e.button` works for me, because I'm using IE (and I need to get work in IE). So your code is working, but for IE `e.which` has to be `e.button` and the numbers are different. – Keith L. Feb 29 '12 at 15:29
Note also that in [IE lt 9] the buttons are 1=left, 2=right, 4=middle. I've used e.button, which seems to work in the modern browsers I've tried (IE9, FF12, Chrome, Safari for Windows) – Matty K Jun 13 '12 at 04:29
aaa --> Where does the event variable come from. It is in the mouseDown function header but it seems like it just appears to me here at the event header. what if you want to print the X and Y coordinates of the click? – Aug 28 '14 at 13:10

score 4 · Answer 2 · answered Jul 26 '13 at 21:01

Here's a modification of xdazz's answer that supports browsers that use e.button, normalizes the value, and stores it in e.which. The added lines are what are used in the JQuery library.

function mouseDown(e) {
  e = e || window.event;
  if ( !e.which && e.button !== undefined ) {
    e.which = ( e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) ) );
  }
  switch (e.which) {
    case 1: alert('left'); break;
    case 2: alert('middle'); break;
    case 3: alert('right'); break; 
  }
}

JS: detect right click without jQuery (inline)

2 Answers2

Linked