By Giffyguy


2010-11-20 22:51:55 8 Comments

I want to block the standard context menus, and handle the right-click event manually.

How is this done?

2 comments

@Chase 2010-11-21 03:29:52

Use the oncontextmenu event.

Here's an example:

<div oncontextmenu="javascript:alert('success!');return false;">
    Lorem Ipsum
</div>

And using event listeners:

el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return false;
}, false);

Don't forget to return false, otherwise the standard context menu will still pop up.

If you are going to use a function you've written rather than javascript:alert("Success!"), remember to return false in BOTH the function AND the oncontextmenu attribute.

@rampion 2011-03-23 13:05:16

using event listeners: elt.addEventListener('contextmenu', function(ev) { ev.preventDefault(); alert('success!'); return false; }, false);

@NiCk Newman 2015-03-22 14:44:19

Great code +1, I found even a slimmer way as well. 'oncontextmenu="chatMenu(event)" then just use e.preventDefault(e) when passing it in chatMenu :D This way, the ;return false; doesn't need to be passed for each new element (say for chat logs or whatnot)

@N D 2016-01-28 17:27:04

This only will handle the right click. If you want one event handler for all types of clicks, use the code above in conjunction with the following: var onMousedown = function (e) { if (e.which === 1) {/*Left Mouse*/} else if (e.which === 3) {/*Right Mouse*/} /*etc.*/ }; clickArea.addEventListener("mousedown", onMousedown); The contextmenu listener will allow the right click event through. Keep in mind that on Mac FF ctrl+rightclick will come through as a left mouse click, but on Mac Chrome ctrl+rightclick will come through as right mouse click.

@InsOp 2017-08-21 17:32:26

wouldnt a missing return value not also being evaluated to false?

@cyber-guard 2010-11-20 23:04:17

I think that you are looking for something like this:

   function rightclick() {
    var rightclick;
    var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert(rightclick); // true or false, you can trap right click here by if comparison
}

(http://www.quirksmode.org/js/events_properties.html)

And then use the onmousedown even with the function rightclick() (if you want to use it globally on whole page you can do this <body onmousedown=rightclick(); >

@Shea 2012-05-04 02:57:27

I think you meant if ((e.which && e.which == 3) || (e.button && e.button == 2)).

@ansiart 2013-01-17 21:41:54

or just (e.which === 3 || e.button === 2)

@weaknespase 2015-11-21 17:45:23

that is old school, but it works almost everywhere.

Related Questions

Sponsored Content

38 Answered Questions

[SOLVED] How do you get a timestamp in JavaScript?

82 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5954423 View
  • 7420 Score
  • 82 Answer
  • Tags:   javascript arrays

30 Answered Questions

[SOLVED] How to change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2421947 View
  • 2597 Score
  • 30 Answer
  • Tags:   javascript html dom

39 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

3 Answered Questions

18 Answered Questions

[SOLVED] How to disable resizable property of textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1241407 View
  • 2463 Score
  • 18 Answer
  • Tags:   html css

84 Answered Questions

[SOLVED] How to validate an email address in JavaScript

56 Answered Questions

[SOLVED] How to replace all occurrences of a string?

57 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

86 Answered Questions

[SOLVED] How do JavaScript closures work?

Sponsored Content