54

我的 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 但不是运气。

4

12 回答 12

112

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

<body oncontextmenu="return false;">
于 2011-02-07T10:32:56.317 回答
46

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

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

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

$(document).contextmenu(function() {
    return false;
});
于 2014-01-07T13:31:21.673 回答
13

一条 jQuery 行：

$('[id^="fBox"]').on("contextmenu", function(evt) {evt.preventDefault();});
于 2013-05-09T14:10:44.180 回答
8

尝试这个：

$('#fBox' + folderID).bind("contextmenu", function () {
                alert("Right click not allowed");
                return false;
            });
于 2011-02-07T10:35:07.653 回答
4

尝试...

$('[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) {
    ...
});
于 2011-02-07T10:42:28.990 回答
3

我同意@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
});

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

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

高温高压

于 2013-06-18T15:51:19.960 回答
2

为了我 

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

jQuery 完成了这项工作 :)

于 2013-10-18T07:47:28.747 回答
2

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

于 2011-02-07T10:36:35.530 回答
2

使用 jQuery：

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

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

$(document).bind("contextmenu",function(e){
    return false;
});
于 2012-11-06T23:12:11.480 回答
1 
// 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();

    }
});
于 2011-02-07T10:34:06.230 回答
1

这是我最近遇到问题时使用的一种方法（也使用了一点 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");
    }
}
于 2018-01-03T23:53:14.427 回答
0

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

    $(document).bind("contextmenu",function(e){
        return false;
    });
});
于 2019-11-19T10:03:29.757 回答