Jquery/JS 阻止浏览器中的右键菜单答案

【问题标题】：Jquery/JS prevent right click menu in browsersJquery/JS 阻止浏览器中的右键菜单
【发布时间】：2011-02-07 10:31:17
【问题描述】：

我的 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();

    }
});

但该元素的浏览器仍会弹出默认菜单（复制/粘贴/属性等）。有什么办法可以禁用这个？我试过 return false 但没有运气。

【问题讨论】：

什么是folderID，这段代码是在循环下还是其他？或者你可能需要 preventDefault()？
它在一个动态创建文件夹的函数中。文件夹 ID 是文件夹的唯一 ID。

标签： javascript jquery right-click

【解决方案1】：

您可以通过附加 oncontextmenu="return false;" 来禁用右键单击到你的身体标签。

<body oncontextmenu="return false;">

【讨论】：

我不想为每个元素都禁用它，因为它对用户来说太突兀了，我指定的元素就是我想要的。
您是否尝试将其添加到 fbox 的父级而不是 body ？
非常感谢！ oncontextmenu="返回假；"分配给容器 div 的工作很愉快。
这在 Firefox 10+ 中不起作用；既不将其设置在正文或父元素上。它适用于 Chrome 17 和 IE8。
在 Firefox 33 中的 div 元素上为我工作，甚至通过 jquery 动态分配它：jZone.attr("oncontextmenu", "return false;");

【解决方案2】：

您可以在任何您想要的元素上禁用上下文菜单：

$('selector').contextmenu(function() {
    return false;
});

要完全禁用页面上的上下文菜单（感谢 Ismail），请使用以下命令：

$(document).contextmenu(function() {
    return false;
});

【讨论】：

* 适用于整个页面，但特定的选择器选项没有。
$('*') 选择器使用量很大 $(document)

【解决方案3】：

一个 jQuery 行：

$('[id^="fBox"]').on("contextmenu", function(evt) {evt.preventDefault();});

【讨论】：

【解决方案4】：

试试这个：

$('#fBox' + folderID).bind("contextmenu", function () {
                alert("Right click not allowed");
                return false;
            });

【讨论】：

警报会阻止菜单，但也会阻止所有其他代码运行
如果您希望其余代码运行，请使用 preventDefault() 而不是返回 false。 Return false 停止所有事件传播，但 preventDefault() 将停止当前事件并继续执行其余代码。

【解决方案5】：

试试……

$('[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();

    }
});

如果您对这些框有任何动态创建，那么...

$('[id^="fBox"]').live('mousedown',function(event) {
    ...
});

【讨论】：

【解决方案6】：

我同意@aruseni，在正文级别阻止 oncontextmenu，您将避免在页面中的每个元素上右键单击标准上下文菜单。

但是，如果您想要更精细的控制怎么办？

我遇到了类似的问题，我认为我找到了一个很好的解决方案：为什么不直接将上下文菜单代码附加到您要处理的特定元素的 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
});

因此，您避免处理两个不同的事件只是为了捕获上下文菜单并对其进行自定义:)

当然，这假设您不介意在有人单击您未选择的元素时显示标准上下文菜单。您还可以根据用户右键单击的位置显示不同的上下文菜单..

HTH

【讨论】：

使用“contextmenu”事件而不是必须使用“mousedown”然后识别右键单击的好主意...

【解决方案7】：

这是浏览器现在禁用交替点击覆盖的默认行为。每个用户都必须在最近的浏览器中允许这种行为。例如，我不允许这种行为，因为我总是想要我的默认弹出菜单。

【讨论】：

【解决方案8】：

使用 jQuery：

$('[id^="fBox"]').bind("contextmenu",function(e){
    return false;
});

或者禁用整个页面的上下文菜单：

$(document).bind("contextmenu",function(e){
    return false;
});

【讨论】：

【解决方案9】：

对我来说

$('body').on('contextmenu',function(){return false;});

jQuery 完成了这项工作 :)

【讨论】：

【解决方案10】：

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

    }
});

【讨论】：

不走运，我在将 div 添加到 DOM 后添加了这个，但它仍然显示菜单

【解决方案11】：

这是我最近遇到问题时使用的一种方法（也使用了一点 jQuery）。由于 mousedown 事件发生在 contextmenu 之前，这个技巧似乎抓住了它，它附加了一个 body 级别的 oncontextmenu 处理程序以在 mousedown 事件中临时返回 false，执行您想要的操作，然后作为重要的部分，记得在之后删除处理程序.

这只是我提取出来的部分代码，作为例子……

$(div)
    .mousedown(function (e) {
        if (!leftButtonPressed(e)) {
            disableContextMenu(true);
            showOptions({ x: e.clientX, y: e.clientY }, div); // do my own thing here
        }
    });

当我的 showoptions() rtn 完成时，会运行一个回调函数并再次调用 disable-rtn，但使用 'false'：

disableContextMenu(false);

这是我的 disableContextMenu() rtn：

function disableContextMenu(boolDisable, fn) {
    if (boolDisable) {
        $(document).contextmenu(function (e) {
            if (fn !== undefined) {
                return fn(e);
            } else {
                return false;
            }
        });
    } else {
        $(document).prop("oncontextmenu", null).off("contextmenu");
    }
}

【讨论】：

【解决方案12】：

有许多 Javascript sn-ps 可用于禁用右键单击上下文菜单，但 JQuery 使事情变得更容易：

    $(document).bind("contextmenu",function(e){
        return false;
    });
});

【讨论】：