2013-10-12 5 views
0

Cet outil incrémente la valeur à la force sur le clic gauche à la valeur de force et décrémente la valeur sur le clic gauche.Désactiver le menu contextuel du clic droit?

Cela fonctionne, mais le menu contextuel apparaît lorsque vous faites un clic droit pour décrémenter la valeur.

Comment puis-je m'en débarrasser?

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>

+0

S'il vous plaît poster un code valide dans votre question plutôt que des liens vers des sites externes. –

+3

"Les questions concernant les problèmes avec le code que vous avez écrit doivent décrire le problème spécifique - et ** inclure un code valide pour le reproduire - dans la question elle-même **." –

Répondre

3

Vous devrez utiliser event.preventDefault() pour éviter que cela se produise. Dans le cas de votre code, vous devez pass the triggering event object as a reference à votre fonction subtract. Comme si:

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

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

Working example

Mais s'il vous plaît, notez que votre code est un gâchis. D'une part, dans JSBin lui-même, il émet une série d'avertissements que vous devriez examiner. Pour une autre chose, you shouldn't bind your event handlers inline. Please separate your concerns.

+1

Je comprends ce que vous voulez dire: nous faisons tous des compromis en commençant à travailler sur le code, puis [refactor] (https://en.wikipedia.org/wiki/Code_refactoring). Mais croyez-moi, si vous commencez avec un code propre, vous vous remercierez plus tard.Il n'y a vraiment aucune raison de ne pas utiliser de classeurs d'événements ou de CSS au lieu de tout en ligne, il est en fait plus long de le faire. – Sunyatasattva

+0

+1, bonne réponse! ':))' –

+0

@ user2811882 La façon dont vous le faites est parfaitement acceptable. Une alternative serait d'utiliser ['Math.max()'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max) pour le minimum et [' Math.min() '] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min) pour le maximum (je sais, source de confusion :)) – Sunyatasattva

0

pourrait essayer

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

code * Mise à jour * au lieu de corps:

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

Ensuite seul ce code sera exécuté.

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

} 
+0

Et Downvote parce que? ':)' Sighhh! Prenez soin de jeter de la lumière s'il vous plaît. –

+2

Vous désactivez le clic droit sur tout le corps. Si j'étais un utilisateur, je détesterais ça. – Sunyatasattva

+0

@Sunyatasattva vous comprenez que cela permettra au 'onContextMenu' pour le besoin spécifique de l'utilisateur, il pourrait être déplacer vers la table de tout niveau html. D'uh facile, c'est vrai. Mais acclamations pour vos soucis mec, donc vous downvoted juste parce que vous détestez ce lol? ** Démo comme ceci ** http://jsbin.com/ujaSiTu/1/edit ** mis à jour mon poste avec la table désactivée seulement ** pourrait faire la cellule ainsi –

0

Stole cette from a previous answer mais un peu changé. Donnez le <td> un id comme ... « Force » ou quoi puis essayez ceci:

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

Mettez qu'au début et inclure jQuery dans le code.

Votre JSbin

Questions connexes