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

问题描述 投票:48回答:11

我有一个右键单击弹出菜单的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();

    }
});

但是这个元素的浏览器仍会弹出默认菜单(复制/粘贴/属性等)。有什么方法可以禁用它吗?我试过回复假,但没有运气。

javascript jquery right-click
11个回答
104
投票

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

<body oncontextmenu="return false;">

1
投票

为了我

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

jQuery做的工作:)


0
投票

这是我最近使用的一种方式(使用一些小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");
    }
}

42
投票

您可以在所需的任何元素上禁用上下文菜单:

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

要完全禁用页面上的上下文菜单(感谢Ismail),请使用以下命令:

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

13
投票

一个jQuery行:

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

8
投票

试试这个:

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

3
投票

尝试...

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

2
投票

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


2
投票

使用jQuery:

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

或者在整个页面上禁用上下文菜单:

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

2
投票

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


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

    }
});
© www.soinside.com 2019 - 2024. All rights reserved.