0

このツールは、強度の値で左クリックの強度の値を増加させ、左クリックの値を減少させます。

これは機能しますが、右クリックして値を減らすとコンテキスト メニューが表示されます。

どうすればそれを取り除くことができますか?

コードとデモ

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>

4

3 に答える 3

4

event.preventDefault()それを防ぐために使用する必要があります。

コードの場合、トリガー イベント オブジェクトを関数への参照として渡す必要がありますsubtract。そのようです：

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

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

Working example

ただし、コードが混乱していることに注意してください。1 つには、JSBin 自体で、調べる必要のある一連の警告が出力されます。別の理由として、イベント ハンドラーを inline にバインドしないでください。懸念事項を分けてください。

于 2013-10-12T21:24:22.830 に答える
0

これを試すことができます

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

コード*更新* 全身の代わりに:

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;">

その後、このコードのみが実行されます。

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);

}
于 2013-10-12T21:27:24.103 に答える
0

これは以前の回答から盗みましたが、少し変更されました。<td>like..."Strength" などの ID を指定してから、これを試してください。

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

それを先頭に置き、コードに jQuery を含めます。

あなたのJSbin

于 2013-10-12T21:27:39.497 に答える