Javascript Jquery/JS 防止浏览器右键菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4920221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery/JS prevent right click menu in browsers
提问by Tom Gullen
I have my div with a right click popup menu:
我有一个带有右键单击弹出菜单的 div：
// Attatch right click event to folder for extra options
$('#fBox' + folderID).mousedown(function(event) {
if (event.which == 3) {
// Set ID
currRClickFolder = folderID;
// Calculate position to show popup menu
var height = $('#folderRClickMenu').height();
var width = $('#folderRClickMenu').width();
leftVal = event.pageX - (width / 2) + "px";
topVal = event.pageY - (height) + "px";
$('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();
}
});
But the browser for this element still pops up the default menu (copy/paste/properties etc). Any way to disable this? I've tried return false but not luck.
但是这个元素的浏览器仍然弹出默认菜单（复制/粘贴/属性等）。有什么办法可以禁用这个吗？我试过 return false 但不是运气。
回答by Arseny
You can disable the right click by appending oncontextmenu="return false;" to your body tag.
您可以通过附加 oncontextmenu="return false;" 来禁用右键单击 到你的身体标签。
<body oncontextmenu="return false;">
回答by Webars
You can disable context menu on any element you want:
您可以在您想要的任何元素上禁用上下文菜单：
$('selector').contextmenu(function() {
return false;
});
To disable context menu on the page completely (thanks to Ismail), use the following:
要完全禁用页面上的上下文菜单（感谢 Ismail），请使用以下命令：
$(document).contextmenu(function() {
return false;
});
回答by KrisWebDev
One jQuery line:
一行 jQuery：
$('[id^="fBox"]').on("contextmenu", function(evt) {evt.preventDefault();});
回答by Sang Suantak
Try this:
尝试这个：
$('#fBox' + folderID).bind("contextmenu", function () {
alert("Right click not allowed");
return false;
});
回答by Ian Wood
Try...
尝试...
$('[id^="fBox"]').mousedown(function(event) {
if (event.which == 3) {
event.preventDefault();
// Set ID
currRClickFolder = $(this).attr('id').replace('fBox','');
// Calculate position to show popup menu
var height = $('#folderRClickMenu').height();
var width = $('#folderRClickMenu').width();
leftVal = event.pageX - (width / 2) + "px";
topVal = event.pageY - (height) + "px";
$('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();
}
});
if you have any dynamic creation of these boxes then...
如果您对这些盒子有任何动态创建，那么...
$('[id^="fBox"]').live('mousedown',function(event) {
...
});
回答by kachar
Using jQuery:
使用jQuery：
$('[id^="fBox"]').bind("contextmenu",function(e){
return false;
});
Or disable context menu on the whole page:
或者在整个页面上禁用上下文菜单：
$(document).bind("contextmenu",function(e){
return false;
});
回答by Luke
I agree with @aruseni, blocking oncontextmenu at the body level you'll avoid the standard context menu on the right click for every element in the page.
我同意@aruseni，在正文级别阻止 oncontextmenu 您将避免在右键单击页面中的每个元素时使用标准上下文菜单。
But what if you want to have a finer control?
但是如果你想有一个更好的控制呢？
I had a similar issue and I thought I've found a good solution: why not attaching directly your context menu code to the contextmenuevent of the specific element(s) you want to deal with? Something like this:
我有一个类似的问题，我想我找到了一个很好的解决方案：为什么不直接将上下文菜单代码附加到contextmenu要处理的特定元素的事件？像这样的东西：
// Attatch right click event to folder for extra options
$('#fBox' + folderID).on("contextmenu", function(event) {
// <-- here you handle your custom context menu
// Set ID
currRClickFolder = folderID;
// Calculate position to show popup menu
var height = $('#folderRClickMenu').height();
var width = $('#folderRClickMenu').width();
leftVal = event.pageX - (width / 2) + "px";
topVal = event.pageY - (height) + "px";
$('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();
event.stopImmediatePropagation();
return false; // <-- here you avoid the default context menu
});
Thus you avoid handling two different events just to capture the context menu and customize it :)
因此，您避免处理两个不同的事件只是为了捕获上下文菜单并对其进行自定义:)
Of course this assumes you don't mind having the standard context menu displayed when someone clicks the elements you didn't select. You might as well show different context menus depending on where users right-click..
当然，这假设您不介意在有人单击您未选择的元素时显示标准上下文菜单。您也可以根据用户右键单击的位置显示不同的上下文菜单。
HTH
HTH
回答by Miros?aw Karczmarczyk
For me
为了我
$('body').on('contextmenu',function(){return false;});
jQuery does the job :)
jQuery 完成了这项工作:)
回答by Olivier Grégtheitroade
This is a default behavior of browsers now to disable the alternate-click override. Each user has to allow this behavior in recent browsers. For instance, I don't allow this behavior as I always want my default pop-up menu.
这是浏览器的默认行为，现在禁用交替单击覆盖。每个用户都必须在最近的浏览器中允许这种行为。例如，我不允许这种行为，因为我总是想要我的默认弹出菜单。
回答by Shrinath
// Attatch right click event to folder for extra options
$('#fBox' + folderID).mousedown(function(event) {
if (event.which == 3) {
event.preventDefault();
// Set ID
currRClickFolder = folderID;
// Calculate position to show popup menu
var height = $('#folderRClickMenu').height();
var width = $('#folderRClickMenu').width();
leftVal = event.pageX - (width / 2) + "px";
topVal = event.pageY - (height) + "px";
$('#folderRClickMenu').css({ left: leftVal, top: topVal }).show();
}
});
