2011-02-07 79 views
39

我有我用右鍵點擊彈出菜單的div右鍵菜單:jQuery的/ JS防止在瀏覽器中

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

    } 
}); 

但該元素的瀏覽器仍然彈出默認的菜單(複製/粘貼/屬性等) 。任何方式來禁用此?我試過返回錯誤,但不是運氣。

+1

是什麼folderID,是一個循環下,該代碼或別的東西?或者你可能需要preventDefault()? – 2011-02-07 10:33:31

+0

這是一個動態創建文件夾的函數。文件夾ID是該文件夾的唯一ID。 – 2011-02-07 10:34:30

回答

94

您可以通過追加oncontextmenu =「return false;」來禁用右鍵單擊到你的身體標籤。

<body oncontextmenu="return false;"> 
+3

我不想爲每個元素禁用它,因爲它對用戶來說太過分了,只是我指定的元素就是我想要的。 – 2011-02-07 10:33:40

+17

你嘗試將它添加到fbox的父項而不是正文? – Shrinath 2011-02-07 10:39:18

+4

非常感謝! oncontextmenu =「返回false;」分配給容器的div工作了一種享受。 – 2011-02-07 10:48:19

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

    } 
}); 
8

試試這個:

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

這是現在的瀏覽器的默認行爲,禁用備用單擊覆蓋。每個用戶都必須在最近的瀏覽器中允許這種行爲。例如,我不允許這種行爲,因爲我總是想要我的默認彈出式菜單。

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

使用jQuery:

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

或禁用上下文菜單整頁:

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

一個jQuery的行:

$('[id^="fBox"]').on("contextmenu", function(evt) {evt.preventDefault();}); 
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

對我來說

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

的jQuery做這項工作:)

32

可以在任何元素上禁用上下文菜單中你想要的:

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

要禁用上下文菜單在頁面上完全(感謝伊斯梅爾),使用以下:

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

這是我最近使用的一種方式(使用一個小的jQuery),當我遇到問題時。由於mousedown事件發生在contextmenu之前,這個技巧似乎可以捕獲它,它附加了on-textmenu處理程序的主體級別,以便在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完成,回調函數運行,並且呼籲禁用-RTN了,但與 '假':

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