Come catturare l'evento del tasto destro in JavaScript

Quando un utente si fa clic con il pulsante destro del mouse su una pagina Web, viene visualizzato un menu di contesto o un menu a clic destro. Gli sviluppatori spesso devono intraprendere un'azione quando un utente esegue un clic destro su un elemento dell'applicazione Web. Pertanto, devono tracciare/catturare il clic destro sul sito Web.

Questo tutorial illustrerà la procedura per l'acquisizione dell'evento del tasto destro in JavaScript.

Come catturare l'evento del tasto destro in JavaScript?

Usa il "finestra.addEventListener ()"Metodo passando l'evento"menù contestuale". Ogni volta che l'utente tenta di avviare un menu contestuale facendo clic sul pulsante destro del mouse, l'evento di contesto di Menu viene attivato.

Esempio 1: acquisire l'evento del tasto destro del mouse usando il metodo AddeventListener () con il metodo Alert ()

Per catturare un clic destro su una pagina Web, usa il “finestra.addEventListener ()"Metodo per allegare/aggiungere un gestore di eventi a un elemento. Quindi, mostra il risultato che l'utente fa clic con il pulsante destro del mouse sulla pagina usando "mettere in guardia()" metodo. Verrà visualizzato il messaggio in una finestra di dialogo che verrà visualizzata sullo schermo con "OK"Pulsante:

finestra.addEventListener ('contextMenu', (event) =>
avviso ("mouse a destra");
);

L'output visualizza un messaggio di avviso quando facciamo clic con il pulsante destro del mouse sulla pagina e quindi apre il menu contestuale predefinito:

Esempio 2: acquisire l'evento del tasto destro utilizzando il metodo AddeventListener () con console.Metodo log ()

Qui, cattureremo l'evento del tasto destro e subiremo un messaggio alla console:

finestra.addEventListener ('contextMenu', (event) =>
console.log ("mouse a destra");
);

Produzione

Esempio 3: limitare il tasto destro del mouse per visualizzare il menu predefinito

In questo esempio, vedremo limitare il menu contestuale predefinito da aprire al clic destro usando "PreventDefault ()" metodo:

finestra.addEventListener ('contextMenu', (event) =>
evento.preventDefault ();
Avviso ("Il mouse è prevenuto il clic destro");
);

Come puoi vedere nell'output, il menu contestuale predefinito non viene visualizzato sul mouse-clic destro:

Esempio 4: Apri il menu di contesto personalizzato sul mouse fare clic con il tasto destro del mouse

Qui, l'output mostra un menu contestuale personalizzato sull'evento del mouse destro del mouse. Più specificamente, seguire il link per creare un menu contestuale personalizzato:

Si tratta di catturare l'evento del tasto destro in JavaScript.

Conclusione

Per catturare l'evento del tasto destro in JavaScript, usa il “finestra.addEventListener ()"Metodo passando l'evento"menù contestuale". L'evento di contestmenu viene attivato quando un utente tenta di avviare un menu contestuale facendo clic sul pulsante destro del mouse. In questo tutorial, abbiamo illustrato la procedura per l'acquisizione dell'evento del tasto destro in JavaScript.