Can I handle a right click event on an HTML <button /> element?

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.)

The contextmenu event fires for me on Chrome, Firefox, Opera (all on Linux) and on IE10 on Windows 7: jsbin.com/oduhak/1 Don't have earlier handy IEs to check (too many VMs running already). — T.J. Crowder
– T.J. Crowder, Commented Jul 25, 2013 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
– Ken Bellows, Commented Jul 25, 2013 at 13:26

Ry- · Accepted Answer · 2013-07-25 14:29:44Z

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, 2013 at 14:29

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Jul 25, 2013 at 13:26

ra_sangeeth

4673 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ken Bellows Over a year ago

That's definitely another way to go about it. Thanks!

tymeJV · Accepted Answer · 2013-07-25 13:16:25Z

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, 2013 at 13:16

tymeJV

105k14 gold badges165 silver badges158 bronze badges

3 Comments

Andrew Walters Over a year ago

@IanClark It does in the latest version: 22.0

Ken Bellows Over a year ago

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.

tymeJV Over a year ago

@KenB -- All good, first time writing something like this, happy it worked!

Rusty Nail · Accepted Answer · 2017-06-23 02:05:14Z

3

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>

answered Jun 23, 2017 at 2:05

Rusty Nail

2,7103 gold badges37 silver badges59 bronze badges

Comments

Manish Patwari · Accepted Answer · 2014-02-18 05:54:48Z

0

You can make use of "context Menu" also :

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

answered Feb 18, 2014 at 5:54

Manish Patwari

5686 silver badges21 bronze badges

Collectives™ on Stack Overflow

Can I handle a right click event on an HTML <button /> element?

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related