禁用右键单击上下文菜单
Disable Right Click Context Menu?
此工具在左键单击时将强度值递增为强度值,并在单击左键时递减值。
这有效,但是当您右键单击以减小值时,会出现上下文菜单。
我怎样才能摆脱它?
代码和演示
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>
您必须使用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…
}
工作示例
但是请注意,您的代码一团糟。首先,在JSBin本身中,它会输出一系列您应该查看的警告。另一方面,不应以内联方式绑定事件处理程序。请分开您的顾虑。
从以前的答案中偷走了这个,但稍微改变了一点。 给<td>
一个类似..."力量"或其他什么的id,然后尝试这个:
$(document).ready(function() {
$('#strength').bind('contextmenu', function(e) {
return false;
});
});
把它放在开头,并在代码中包含jQuery。
您的 JSbin
可以试试这个
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);
}
相关文章:
- 使用JQuery的动态上下文菜单
- JQuery在单击正文时隐藏上下文菜单
- JQuery上下文菜单显示/隐藏问题
- 防止在移动Safari(iPad/iPhone)中长按/长按默认上下文菜单
- d3防止在上下文菜单上触发mouseout
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 使用JSTree上下文菜单捕获新创建的节点
- 在GXT中激活上下文菜单时,如何保持选中的文本高亮显示?(EXT GWT 2.x)
- HTML5上下文菜单-当菜单项被点击时,访问最初被点击的元素
- 可替代多级上下文菜单
- 如何在鼠标悬停时显示带有拉斐尔元素(圆、线)的上下文菜单
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 如何使用jstree删除上下文菜单中的编辑选项
- 如何使用Windows Phone在IE上禁用上下文菜单(保存和共享照片)
- TinyMCE 在上下文菜单中创建子菜单
- D3 上下文菜单,更改所选节点颜色
- 剑道上下文菜单 - 防止在鼠标按下时关闭
- 将上下文菜单附加到大量图形点
- API Google Maps Javascript在上下文菜单中调用事件侦听器
- 禁用特定元素的移动长按上下文菜单