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

发布于 2024-10-16 08:10:56 字数 656 浏览 5 评论 0原文

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

原文

I have my div with a right click popup menu:

// 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

未蓝澄海的烟 2024-10-23 08:10:57

这是我最近遇到问题时使用的一种方法（也使用了一点 jQuery）。由于 mousedown 事件发生在 contextmenu 之前，因此这个技巧似乎可以捕获它，即附加一个主体级别的 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");
    }
}

Here's a way I used recently (using a little jQuery too,) when I was running into a problem with it. Since the mousedown event occurs before the contextmenu, this trick seems to catch it, which is attaching a body level oncontextmenu handler to return false temporarily in the mousedown event, perform your desired action, then as an important part, remember to remove the handler afterward.

This is just part of my code extracted out, as an example...

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

When my showoptions() rtn finishes, a callback function is run and it calls the disable-rtn again, but with 'false':

disableContextMenu(false);

Here's my 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");
    }
}

回复收藏 0 原文

口干舌燥 2024-10-23 08:10:57

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

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

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

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

回复收藏 0 原文

扭转时空 2024-10-23 08:10:56

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

<body oncontextmenu="return false;">

You can disable the right click by appending oncontextmenu="return false;" to your body tag.

<body oncontextmenu="return false;">

回复收藏 0 原文

听，心雨的声音 2024-10-23 08:10:56

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

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

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

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

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:

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

回复收藏 0 原文

羁客 2024-10-23 08:10:56

一行 jQuery：

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

One jQuery line:

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

回复收藏 0 原文

饮湿 2024-10-23 08:10:56

试试这个：

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

Try this:

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

回复收藏 0 原文

孤独陪着我 2024-10-23 08:10:56

尝试...

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

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) {
    ...
});

回复收藏 0 原文

旧城空念 2024-10-23 08:10:56

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

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.

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 contextmenu event of the specific element(s) you want to deal with? Something like this:

// 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

回复收藏 0 原文

命硬 2024-10-23 08:10:56

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

回复收藏 0 原文

盛夏尉蓝 2024-10-23 08:10:56

使用 jQuery：

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

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

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

Using jQuery:

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

Or disable context menu on the whole page:

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

回复收藏 0 原文

梨涡少年 2024-10-23 08:10:56

为我

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

jQuery 完成了这项工作:)

For me

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

jQuery does the job :)

回复收藏 0 原文

月野兔 2024-10-23 08:10:56

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

    }
});

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

    }
});

回复收藏 0 原文

~没有更多了~