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?


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

Use the oncontextmenu event.

Here's an example:

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

And using event listeners:

el.addEventListener('contextmenu', function(ev) {
    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


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