Disable Right Click Context Menu?

Question

This tool increments the value at strength on left click at the value of strength and decrements the value on left click.

This works, however the context menu appears when you do a right click to decrement the value.

How can I get rid of it?

CODE AND DEMO

var Alexander = 
     {
      Strength: "AlexanderStrengthVal",
      Bonus: "AlexanderRemainingBonusVal",
      Limits: {
        Strength: 60,
              }
    };

function add(character, stat)
{
  var txtNumber = document.getElementById(character[stat]);
  var newNumber = parseInt(txtNumber.value) + 1;
  var BonusVal = document.getElementById(character["Bonus"]);
  if(BonusVal.value == 0) return;
  var newBonus = parseInt(BonusVal.value) - 1;
  BonusVal.value = newBonus; 
  txtNumber.value = newNumber;
}

function subtract(character, stat)
{
  var txtNumber = document.getElementById(character[stat]);
  var newNumber = parseInt(txtNumber.value) - 1;
  if(newNumber < character.Limits[stat]) return;
    var BonusVal = document.getElementById(character["Bonus"]);
  var newBonus = parseInt(BonusVal.value) + 1;
  BonusVal.value = newBonus; 
  txtNumber.value = newNumber;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  
  <table cellpadding='5' border='1' style="text-align:center; color:#ffffff; background-color:#444444; font-family:arial; font-size:14px">
   <tr>
      <td><b>Character</b></td>
      <td><b>Strength</b></td>
      <td><b>Spending Bonus</b></td>
   </tr>
    <tr>
      <td>Alexander</td>
      <td>
        <input 
        id="AlexanderStrengthVal" 
        type="text" value="60" 
        style="width:30px; border:none; color:#ffffff; background-color:transparent; text-align:center" 
        onfocus="this.blur()" 
        onClick="add(Alexander, 'Strength')" 
        onContextMenu="subtract(Alexander, 'Strength');"   
        />
      </td>

      <td>
        <input 
        id="AlexanderRemainingBonusVal" 
        type="text" 
        value="30" 
        style="width:30px; border:none; color:#ffffff; background-color:transparent; text-align:center" 
        />
      </td>
      
    </tr>
  </table>
</body>
</html>

Please post valid code in your question rather than just linking to external sites. — James Donnelly, Oct 12 '13 at 21:21
"Questions concerning problems with code you've written must describe the specific problem — and **include valid code to reproduce it — in the question itself**." — James Donnelly, Oct 12 '13 at 21:30

score 4 · Accepted Answer · answered Oct 12 '13 at 21:24

4

You will have to use event.preventDefault() to prevent that to happen.

In the case of your code, you have to pass the triggering event object as a reference to your function subtract. Like so:

onContextMenu="subtract(event, Alexander, 'Strength');" // This is in the HTML

function subtract(e, character, stat)
{
  e.preventDefault();
  // The rest of your code…
}

Working example

But please, note that your code is a mess. For one thing, in JSBin itself it outputs a series of warnings you should look into. For another thing, you shouldn't bind your event handlers inline. Please separate your concerns.

answered Oct 12 '13 at 21:24

Sunyatasattva

5,619
3
27
37

1

I understand what you mean: we all do some compromises when starting to work on the code and then [refactor](https://en.wikipedia.org/wiki/Code_refactoring). But believe me, if you start with a clean code you will thank yourself later. There is really no reason to not use event binders or CSS instead of inline everything, it is actually more time-consuming to do this. – Sunyatasattva Oct 12 '13 at 21:32
@user2811882 The way you do it is perfectly acceptable. An alternative would be to use [`Math.max()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max) for the minimum and [`Math.min()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min) for the maximum (I know, confusing :)) – Sunyatasattva Oct 12 '13 at 22:58
This is becoming OT. Why don't you just open another question? Then post the link here and I will gladly answer; perhaps somebody has smarter ideas than I have. In any case the `Strength: 60-80` would compute the operation returning `-20`. In a nutshell you need to store the limits as two variables (or in an array). – Sunyatasattva Oct 12 '13 at 23:13

Tats_innit · Answer 2 · 2013-10-12T21:33:44.380

0

Could try this

http://jsbin.com/OGoLuHa/1/edit

Code *Update* instead of whole body:

http://jsbin.com/ujaSiTu/1/edit

  <table cellpadding='5' border='1' style="text-align:center; color:#ffffff; background-color:#444444; font-family:arial; font-size:14px" oncontextmenu="return false;">

<body oncontextmenu="return false;">

Then only this code will execute.

function subtract(character, stat)
{
  alert('Substract context Menu');
  var txtNumber = document.getElementById(character[stat]);
  alert(txtNumber);
  var newNumber = parseInt(txtNumber.value) - 1;
  alert(newNumber);
  if(newNumber < character.Limits[stat]) return;
    var BonusVal = document.getElementById(character["Bonus"]);
  var newBonus = parseInt(BonusVal.value) + 1;
  BonusVal.value = newBonus; 
  txtNumber.value = newNumber;
  alert(newNumber);

}

edited Oct 12 '13 at 21:33

answered Oct 12 '13 at 21:27

Tats_innit

33,991
10
71
77

And Downvote because ? `:)` Sighhh! Care to throw some light please. – Tats_innit Oct 12 '13 at 21:28
2

You are disabling the right click on the whole body. If I were a user I would hate this. – Sunyatasattva Oct 12 '13 at 21:30
@Sunyatasattva you do understand that this will enable the `onContextMenu` for the specific need of User, it could be move to the Table of any html level. D'uh easy, right. But cheers for your concerns dude, SO you downvoted just coz you hate this lol ? **Demo like this** http://jsbin.com/ujaSiTu/1/edit **updated my Post with table disabled only** could do cell as well – Tats_innit Oct 12 '13 at 21:32
2

I downvoted because I feel this is an answer pointing towards the wrong direction and advocating bad solution/bad practices. – Sunyatasattva Oct 12 '13 at 21:33
@Sunyatasattva so adding `onCOntextMenu` at `table` level - what is **bad** with it? I would love to know? `:)` – Tats_innit Oct 12 '13 at 21:35
1

Please don't get stubborn on this. You helped a ton of people and I have great respect for that, but just drop this. You have no idea of how big the table is going to be, how many columns, what kind of information will it include and so on. Even disabling it table-wide is a bad idea. You have to be as narrow as possible; and still, this is not the solution. The OP's code is already messy and follows loads of bad practices, don't feed them. – Sunyatasattva Oct 12 '13 at 21:42
@Sunyatasattva LOOOL Brooo I am cool `:)`, Just wanted to know **technically** what is wrong with it! Will buy you a pint `:)` , the same can be done at cell level. **Also** remember YAGNI principle (You ain't gonna need it) Instead of speculating what table is what size is not good! So then technically there is no issues with this **onContextMenu** then? You should back up your downvotes with solid reasoning thats it man, it help everyone to understand! – Tats_innit Oct 12 '13 at 21:45

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

Stole this from a previous answer but changed a little. Give the <td> an id of like..."Strength" or whatever and then try this:

$(document).ready(function() {    
$('#strength').bind('contextmenu', function(e) {
        return false;
    }); 
});

Put that at the beginning and include jQuery in the code.

Your JSbin

edited May 23 '17 at 10:27

Community

1
1

answered Oct 12 '13 at 21:27

Deryck

7,608
2
24
43

Disable Right Click Context Menu?

3 Answers3

Linked