Disable Context Menu (Right click) with Javascript

Question

I want to disable the right click menu on a table. Because I'm using the rightclick to change the color of it (did a little Battleship game). However I did not found anything that still works. So I would really appreciate your answer :)

This is the call:

<td class="tdBox" onclick="attack(this, ${xStatus.count}, ${yStatus.count})" onmouseover="background(this)" onmouseout="backgroundLeave(this)" oncontextmenu="markField(this)">

and this is the JavaScript function:

function markField(obj) {
    obj.style.backgroundColor = 'blue';
    //return false;
}

looks like a partial dup of stackoverflow.com/questions/737022/… — kay27
– kay27, Commented Apr 18, 2016 at 6:10
Take the code from the link kay27 posted. In that replace alert(status); line by your colour change code. P.S. I would suggest to not use right click for your input however, as that is never a good idea on a web app. — jitendragarg
– jitendragarg, Commented Apr 18, 2016 at 6:21

Nicklas Nygren · Accepted Answer · 2016-04-18 12:21:17Z

2

Here's how to override the contextmenu event handler:

document.addEventListener("contextmenu", function(e) {
  e.preventDefault();
  alert('Right click');

  // Or, in you case: markField()
});

Note: using document is not a requirement. It will work on any DOM node. Alternatively, you can make the blockage conditional by checking the target of e.

Fiddle: https://jsfiddle.net/h1jdr1ew/1/

edited Apr 18, 2016 at 12:21

answered Apr 18, 2016 at 6:31

Nicklas Nygren

2,60515 silver badges19 bronze badges

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

2 Comments

Selias Over a year ago

This does work partly since I dont want to disable the rightclick on the whole site. However I found a solution based on this by using getElementsByClassName.

function disableRightClick(){ 	var tdBox = document.getElementsByClassName("tdBox"); 	for (i = 0; i < tdBox.length; i++) { 	    tdBox[i].addEventListener("contextmenu", function(e) { 			  e.preventDefault(); 			   			}); 	} }

Nicklas Nygren Over a year ago

Yes, it will work on any DOM node, not just document.

jitendragarg · Accepted Answer · 2016-04-18 06:29:51Z

0

Try this code

<script language="javascript">
function markField(obj)
{
  if(event.button==2)
   {
     //add your code here
     obj.style.backgroundColor = 'blue';
     return false;    
   }
}
</script>

<td class="tdBox" onclick="attack(this, ${xStatus.count}, ${yStatus.count})" 
onmouseover="background(this)" onmouseout="backgroundLeave(this)" 
oncontextmenu="markField(this)">

answered Apr 18, 2016 at 6:29

jitendragarg

9552 gold badges16 silver badges56 bronze badges

2 Comments

Selias Over a year ago

I have tried it with return false; but it did not work.

jitendragarg Over a year ago

what is the error coming? Also, which browser? Some browser do not allow disabling right click. Edit: Check in console to see if JS throws an error.

Collectives™ on Stack Overflow

Disable Context Menu (Right click) with Javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related