web-dev-qa-db-ja.com

Jquery / JSがブラウザの右クリックメニューを妨げる

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

    }
});

しかし、この要素のブラウザはデフォルトのメニュー（コピー/貼り付け/プロパティなど）をポップアップします。これを無効にする方法はありますか？ falseを返すことを試みましたが、運はありません。

javascriptjqueryright-click
49
Tom Gullen

Oncontextmenu = "return false;"を追加すると、右クリックを無効にできます。あなたのボディタグに。

<body oncontextmenu="return false;">
104
Arseny

必要な要素のコンテキストメニューを無効にできます。

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

（Ismailのおかげで）ページのコンテキストメニューを完全に無効にするには、次を使用します。

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

1つのjQuery行：

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

これを試して：

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

試してみてください...

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

JQueryの使用：

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

または、ページ全体でコンテキストメニューを無効にします。

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

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

したがって、コンテキストメニューをキャプチャしてカスタマイズするためだけに、2つの異なるイベントを処理する必要はありません。

もちろん、これは、選択していない要素をクリックしたときに標準のコンテキストメニューが表示されても構わないことを前提としています。ユーザーが右クリックした場所に応じて、異なるコンテキストメニューを表示することもできます。

HTH

2
Luke

これは、代替クリックのオーバーライドを無効にするブラウザのデフォルトの動作です。各ユーザーは、最近のブラウザーでこの動作を許可する必要があります。たとえば、デフォルトのポップアップメニューが常に必要なので、この動作は許可しません。

2
Olivier Grégoire

私のために

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

jQueryは仕事をします:)

1
Mirosław Karczmarczyk
// 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();

    }
});
1
Shrinath

これは、問題に遭遇したときに最近使用した方法です（少しjQueryも使用）。 mousedownイベントはcontextmenuの前に発生するため、このトリックはそれをキャッチするようです。これは、mousedownイベントで一時的にfalseを返すボディレベルのoncontextmenuハンドラを接続し、目的のアクションを実行し、重要な部分として、後でハンドラを削除することを忘れないでください。

これは、例として抽出された私のコードの一部です...

$(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");
    }
}
0
Dan K