Can I handle a right click event on an HTML

Question

I've seen plenty of questions and answers on SO and elsewhere that talk about right click events and how to catch and handle them with JavaScript, generally using the .button attribute of the event object generated by the browser.

However, the one thing I haven't found, probably because it's a pretty weird request, is how to catch and handle right clicks on an HTML <button /> element. Buttons are not handled the same way by the browser as other elements. Most importantly, it seems that a right click on a button doesn't do anything. No context menu and, from what I can tell, no event.

Am I wrong? I hope so, because it will make my life easier. If not, I can simulate a button with a div and some CSS, but I'd rather avoid it. Any thoughts?

(PS: This is for a silly side project, so don't worry about me trying to put a button-right-click-based interface in front of any customers or anything. I'm well aware of how horrible that interface would probably be.)

Possible duplicate: http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event — DevlshOne, Jul 25 '13 at 13:16
The `contextmenu` event fires for me on Chrome, Firefox, Opera (all on Linux) and on IE10 on Windows 7: http://jsbin.com/oduhak/1 Don't have earlier handy IEs to check (too many VMs running already). — T.J. Crowder, Jul 25 '13 at 13:17
@DevlshOne not a duplicate. As I mentioned in the first sentence of my post, while I've seen that post and others like it, it doesn't seem to apply for buttons. Though I'll check on the `contextmenu` event as TJCrowder suggested — Ken Bellows, Jul 25 '13 at 13:26

score 13 · Answer 1 · edited Jul 25 '13 at 14:29

13

http://jsfiddle.net/jqYN5/ is this what you are looking for? Adding context-menu:

<input type="button" value="click me" id="btn">
<button id="btn2">right click</button>`

document.getElementById('btn').onclick = function() {
  alert('click!')
}

document.getElementById('btn2').oncontextmenu = function() {
  alert('right click!')
}

edited Jul 25 '13 at 14:29

Ry-

218,210
55
464
476

answered Jul 25 '13 at 13:26

ra_sangeeth

467
3
13

That's definitely another way to go about it. Thanks! – Ken Bellows Jul 25 '13 at 14:29

score 12 · Accepted Answer · answered Jul 25 '13 at 13:16

12

Sure, just add a onmousedown listener, check which mouse was pressed:

JS:

document.getElementById("test").onmousedown = function(event) {
    if (event.which == 3) {
        alert("right clicked!");
    }
}

HTML:

<button id="test">Test</button>

Demo: http://jsfiddle.net/Jmmqz/

answered Jul 25 '13 at 13:16

tymeJV

103,943
14
161
157

1

@IanClark It does in the latest version: 22.0 – Andrew Walters Jul 25 '13 at 13:19
I'm going to use `onmouseup` instead, but thanks! I forgot about these guys. It's really weird that these events are generated but not an `onclick` event. – Ken Bellows Jul 25 '13 at 13:30
@KenB -- All good, first time writing something like this, happy it worked! – tymeJV Jul 25 '13 at 13:31

score 3 · Answer 3 · answered Jun 23 '17 at 02:05

Or, with perhaps a bit more beginner level understanding:

<script type="text/javascript">
function mouseclick(ele, e) {
if (e.type == 'click') {
    alert('Left Click Detected!');
}
    if (e.type == 'contextmenu') {
    alert('Right Click Detected!');
}
}
</script>

<a href="/" 
onclick="mouseclick(this, event)" 
oncontextmenu="mouseclick(this, event)" >link name</a>

score 0 · Answer 4 · answered Feb 18 '14 at 05:54

0

You can make use of "context Menu" also :

document.getElementById('btn2').oncontextmenu = function() {
 alert('right click!')
}

answered Feb 18 '14 at 05:54

Manish Patwari

566
6
20

Can I handle a right click event on an HTML

4 Answers4

Linked

Can I handle a right click event on an HTML element?

4 Answers4

Linked

Can I handle a right click event on an HTML