2011-02-07 9 views
39

ho il mio div con un diritto click menu a comparsa:Jquery/JS prevenire giusto menu di scatto nei browser

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

    } 
}); 

Ma il browser per questo elemento si apre ancora il menu di default (copia/incolla/proprietà, ecc) . Qualche modo per disabilitare questo? Ho provato a restituire falso ma non fortuna.

+1

ciò che è folderID, questo codice sotto un loop o qualcos'altro? o forse hai bisogno di preventDefault()? –

+0

È in una funzione che crea una cartella dinamicamente. L'ID cartella è un ID univoco per la cartella. –

risposta

94

È possibile disabilitare il clic con il pulsante destro aggiungendo oncontextmenu = "return false;" al tag del tuo corpo.

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

Non voglio disabilitarlo per ogni elemento in quanto sarà troppo invadente per l'utente, solo gli elementi che specifica sono ciò che voglio. –

+17

hai provato ad aggiungerlo al genitore di fbox invece di body? – Shrinath

+4

Eccellente grazie! oncontextmenu = "return false;" assegnato al contenitore div ha funzionato a meraviglia. –

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

    } 
}); 
+0

Nessuna fortuna, aggiungo questo dopo il div viene aggiunto al DOM, ma si vede ancora il menu –

+0

dispiacerebbe la creazione di un codice di prova in jsfiddle.net? – Shrinath

8

Prova questo:

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

I blocchi di avviso del menu, ma blocca anche tutti gli altri codici esecuzione –

+2

Se vuoi resto del codice per eseguire l'uso preventDefault() al posto di ritorno falso. Restituisce false fermate a tutte le propagazioni degli eventi ma preventDefault() interrompe l'evento corrente e continua ad eseguire il resto del codice. –

2

Questo è un comportamento di default dei browser ora per disabilitare l'override alternativo clic. Ogni utente deve consentire questo comportamento nei browser recenti. Ad esempio, non autorizzo questo comportamento perché voglio sempre il mio menu a comparsa predefinito.

3

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

    } 
}); 

se una creazione dinamica di queste caselle poi ...

$('[id^="fBox"]').live('mousedown',function(event) { 
    ... 
}); 
2

utilizzando jQuery:

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

o disattivare il menu contestuale tutta la pagina:

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

Uno jQuery:

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

sono d'accordo con @aruseni, bloccando oncontextmenu a livello di corpo eviterete il menu contestuale standard sul tasto destro del mouse per ogni elemento della pagina.

Ma cosa succede se si desidera avere un controllo più preciso?

Avevo un problema simile e ho pensato di aver trovato una buona soluzione: perché non collegare direttamente il codice del menu di scelta rapida all'evento contextmenu degli elementi specifici che si desidera gestire? Qualcosa di simile a questo:

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

In questo modo evitate gestire due eventi solo per catturare il menu contestuale e personalizzarlo :)

Naturalmente questo presuppone che non dispiacerebbe avere il menu di scelta rapida standard visualizzato quando qualcuno fa clic sugli elementi che non hai selezionato. Potresti anche mostrare diversi menu contestuali a seconda di dove gli utenti fanno clic con il pulsante destro del mouse.

HTH

+1

buona idea usare evento "contextmenu" invece di dover utilizzare "MouseDown" e quindi identificare tasto destro del mouse ... – lepe

1

Per me

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

jQuery fa il lavoro :)

32

È possibile disattivare menu contestuale su qualsiasi elemento che si desidera:

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

Per disattivare contesto menu sulla pagina completamente (grazie a Ismail), utilizzare il seguente:

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

* lavorato per l'intera pagina, ma l'opzione di selezione specifica no.I selettori – Mych

+3

$ ('*') sono molto usati $ (documento) – Ismail

0

Ecco un modo che ho usato di recente (con un po 'di jQuery troppo,) quando ho girato in un problema con esso. Dal momento che si verifica l'evento mousedown prima che il menu contestuale, questo trucco sembra prenderlo, che è il collegamento di un livello di corpo oncontextmenu gestore per restituire false temporaneamente l'evento MouseDown, eseguire l'azione desiderata, poi come una parte importante, ricordarsi di rimuovere il gestore dopo .

Questo è solo parte del mio codice estratto fuori, come un esempio ...

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

Quando miei showoptions() finiture RTN, viene eseguito una funzione di richiamata e chiama il disable-rtn di nuovo, ma con 'false':

disableContextMenu(false); 

Ecco la mia 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"); 
    } 
} 
Problemi correlati