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

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

Answers:

Answer

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/

Answer

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!')
}
Answer

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>
Answer

You can make use of "context Menu" also :

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.