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

93 Answered Questions

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

  • 2011-04-23 22:17:18
  • Walker
  • 6252846 View
  • 7807 Score
  • 93 Answer
  • Tags:   javascript arrays

16 Answered Questions

[SOLVED] How do I disable the resizable property of a textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1299553 View
  • 2579 Score
  • 16 Answer
  • Tags:   html css

89 Answered Questions

[SOLVED] How to validate an email address in JavaScript

76 Answered Questions

[SOLVED] How can I convert a string to boolean in JavaScript?

  • 2008-11-05 00:13:08
  • Kevin
  • 1859063 View
  • 2384 Score
  • 76 Answer
  • Tags:   javascript

42 Answered Questions

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

58 Answered Questions

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

38 Answered Questions

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

86 Answered Questions

[SOLVED] How do JavaScript closures work?

4 Answered Questions

30 Answered Questions

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

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

Sponsored Content