禁用右鍵單擊上下文菜單？

此工具增量強度值左鍵單擊強度值遞減左鍵單擊值。禁用右鍵單擊上下文菜單？

這會起作用，但是當您通過右鍵單擊來減小值時會出現上下文菜單。

我該如何擺脫它？

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>

來源

2013-10-12 user2811882

請發表你的問題的有效代碼，而不僅僅是鏈接到外部網站。 –

「關於您編寫的代碼問題的問題必須描述具體問題 - 並且**包含有效的代碼來重現它 - 在問題本身**中。」 –

你將不得不使用event.preventDefault()，以防止這種情況發生。

在你的代碼的情況下，你必須pass the triggering event object as a reference你的功能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

但是，請注意，你的代碼是一個爛攤子。首先，在JSBin本身，它輸出一系列警告，你應該看看。另一件事，you shouldn't bind your event handlers inline。 Please separate your concerns。

來源

2013-10-12 21:24:22 Sunyatasattva

我明白你的意思：我們在開始處理代碼和[重構]（https://en.wikipedia.org/wiki/Code_refactoring）時都做了一些妥協。但相信我，如果你從一個乾淨的代碼開始，你會在以後感謝你自己。沒有理由不使用事件綁定器或CSS來代替內聯的所有事情，但這樣做實際上更耗時。 – Sunyatasattva

+1，很好的答案！ ':)）' –

@ user2811882你這樣做的方式是完全可以接受的。另一種方法是使用['Math.max（）']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max）作爲最小值和[ Math.min（）']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min）爲最大值（我知道，令人困惑:)） – Sunyatasattva

可以試試這個

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-12 21:27:24

而Downvote是因爲？ '：）'嘆！請小心點燈。 –

您正在禁用全身右鍵單擊。如果我是一個用戶，我會討厭這個。 – Sunyatasattva

@Sunyatasattva你明白，這將啓用'onContextMenu'爲用戶的特定需求，它可以移動到任何html級別的表。呃，容易，對。但是爲你的擔憂而歡呼的哥們，所以你只是低調地說你討厭這個哈哈？ **這樣的演示** http://jsbin.com/ujaSiTu/1/edit **更新了我的帖子，表格僅禁用**可以做單元格以及 –

偷了這個from a previous answer但改變了一點。給<td>的喜歡...「內功」或任何一個ID，然後試試這個：

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

把這點開始，包括jQuery的代碼。

你JSbin

來源

2013-10-12 21:27:39 Deryck

禁用右鍵單擊上下文菜單？

回答

相關問題