禁用右键单击上下文菜单？ [英] Disable Right Click Context Menu?
问题描述
这个工具增加强度值，左键单击强度值，递减左击单击值。 这可以起作用，但是当你点击右键来递减数值时会出现上下文菜单。 我该如何摆脱它？
var Alexander = {Strength：AlexanderStrengthVal，奖励：AlexanderRemainingBonusVal，限制：{Strength：60，}}; function add（character，stat）{var txtNumber = document .getElementById（字符[STAT]）; var newNumber = parseInt（txtNumber.value）+ 1; var BonusVal = document.getElementById（character [Bonus]）;如果（BonusVal.value == 0）返回; 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>< /头><身体GT; < table cellpadding ='5'border ='1'style =text-align：center; color：#ffffff; background-color：＃444444; font-family：arial; font-size：14px> < TR> < TD>< b取代;性格< / B>< / TD> < TD>< b取代;强度< / B>< / TD> < td>< b>支出奖金< / b>< / td> < / TR> < TR> < TD>亚历山大< / TD> < TD> < input id =AlexanderStrengthValtype =textvalue =60style =width：30px; border：none; color：#ffffff; background-color：transparent; text-align：centeronfocus =this .blur（）onClick =add（Alexander，'Strength'）onContextMenu =subtract（Alexander，'Strength'）; /> < / TD> < TD> < input id =AlexanderRemainingBonusValtype =textvalue =30style =width：30px; border：none; color：#ffffff; background-color：transparent; text-align：center/> < / TD> < / TR> < / table>< / body>< / html>
您必须使用解决方案
> event.preventDefault（） 以防止发生这种情况。
代码，您必须将触发事件对象作为参考传递给您的函数减去。像这样：
onContextMenu =subtract（event，Alexander，'Strength'）; //这是HTML
中的函数subtract（e，character，stat）
{
e.preventDefault（）;
//其余的代码...
}
< a href =http://jsbin.com/oxeyeb/97/edit =nofollow> 工作示例
但请注意，你的代码是一团糟。首先，在JSBin本身，它输出一系列警告，你应该看看。另外，你不应该在内联绑定你的事件处理程序。 请分开您的疑虑。
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?
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>
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…
}
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.
这篇关于禁用右键单击上下文菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
