Fare clic con il tasto destro del mouse su un evento Javascript?

Fare clic con il tasto destro del mouse su un evento Javascript? In tal caso, come lo uso?

Come altri hanno già detto, il pulsante destro del mouse può essere rilevato attraverso i normali eventi del mouse (mouse, mouse, clic) . Tuttavia, se stai cercando un evento di attivazione quando viene visualizzato il menu di scelta rapida, stai cercando nel posto sbagliato. Il menu di scelta rapida / contestuale è accessibile anche tramite la tastiera (MAIUSC + F10 o tasto del menu di scelta rapida su Windows e alcuni Linux). In questa situazione, l'evento che stai cercando è oncontextmenu:

window.oncontextmenu = function ()
{
    showCustomMenu();
    return false;     // cancel default menu
}

Per quanto riguarda gli eventi del mouse stessi, i browser impostano una proprietà sull'oggetto evento accessibile dalla funzione di gestione degli eventi:

document.body.onclick = function (e) {
    var isRightMB;
    e = e || window.event;

    if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
        isRightMB = e.which == 3; 
    else if ("button" in e)  // IE, Opera 
        isRightMB = e.button == 2; 

    alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
} 

window.oncontextmenu - MDC

dai un'occhiata al seguente codice jQuery:

$("#myId").mousedown(function(ev){
      if(ev.which == 3)
      {
            alert("Right mouse button clicked on element with id myId");
      }
});

Il valore di whichsarà:

• 1 per il pulsante sinistro
• 2 per il pulsante centrale
• 3 per il pulsante destro

È possibile utilizzare l'evento window.oncontextmenu, ad esempio:

window.oncontextmenu = function () {
  alert('Right Click')
}

<h1>Please Right Click here!</h1>

Sì, anche se w3c afferma che il clic destro può essere rilevato dall'evento clic, onClick non viene attivato tramite il clic destro nei normali browser.

In effetti, il pulsante destro del mouse attiva solo onMouseDown onMouseUp e onContextMenu.

Pertanto, è possibile considerare "onContextMenu" come l'evento del tasto destro. È uno standard HTML5.0.

Se si desidera rilevare il clic destro del mouse, non è necessario utilizzare la MouseEvent.whichproprietà poiché non è standard e vi è una grande incompatibilità tra i browser. (vedi MDN ) Dovresti invece usare MouseEvent.button. Restituisce un numero che rappresenta un determinato pulsante:

• 0: Pulsante principale premuto, in genere il pulsante sinistro o lo stato non inizializzato
• 1: Pulsante ausiliario premuto, in genere il pulsante ruota o il pulsante centrale (se presente)
• 2: Pulsante secondario premuto, in genere il pulsante destro
• 3: Quarto pulsante, in genere il pulsante Indietro del browser
• 4: Quinto pulsante, in genere il pulsante Avanti browser

MouseEvent.button gestisce più tipi di input rispetto al semplice mouse standard:

I pulsanti possono essere configurati diversamente dal layout standard "da sinistra a destra". Un mouse configurato per l'uso con la mano sinistra può avere le azioni del pulsante invertite. Alcuni dispositivi di puntamento hanno solo un pulsante e usano la tastiera o altri meccanismi di input per indicare principale, secondario, ausiliario, ecc. Altri possono avere molti pulsanti associati a funzioni e valori di pulsante diversi.

Riferimento:

1. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
2. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

No, ma è possibile rilevare quale pulsante del mouse è stato utilizzato nell'evento "onmousedown" ... e da lì determinare se si è trattato di un "clic con il tasto destro".

Il codice seguente utilizza jQuery per generare un rightclickevento personalizzato basato sul valore predefinito mousedowne sugli mouseupeventi. Considera i seguenti punti:

• trigger al passaggio del mouse
• si innesca solo se premuto prima sullo stesso elemento sullo stesso elemento
• questo codice funziona anche in JFX Webview (poiché l' contextmenuevento non viene attivato lì)
• NON si attiva quando viene premuto il tasto menu contestuale sulla tastiera (come la soluzione con il on('contextmenu', ...)comando do

$(function ()
{ // global rightclick handler - trigger custom event "rightclick"
	var mouseDownElements = [];
	$(document).on('mousedown', '*', function(event)
	{
		if (event.which == 3)
		{
			mouseDownElements.push(this);
		}
	});
	$(document).on('mouseup', '*', function(event)
	{
		if (event.which == 3 && mouseDownElements.indexOf(this) >= 0)
		{
			$(this).trigger('rightclick');
		}
	});
	$(document).on('mouseup', function()
	{
		 mouseDownElements.length = 0;
	});
    // disable contextmenu
    $(document).on('contextmenu', function(event)
	{
		 event.preventDefault();
	});
});



// Usage:
$('#testButton').on('rightclick', function(event)
{
  alert('this was a rightclick');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testButton">Rightclick me</button>

Sì!

function doSomething(e) {
    var rightclick;
    if (!e) var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert('Rightclick: ' + rightclick); // true or false
}

Sì, oncontextmenu è probabilmente la migliore alternativa, ma tieni presente che si attiva al passaggio del mouse verso il basso mentre il clic si attiverà al passaggio del mouse.

Altre domande correlate riguardavano il doppio clic con il pulsante destro del mouse, che apparentemente non è supportato se non tramite il controllo manuale del timer. Uno dei motivi per cui potresti voler avere il doppio clic destro è se hai bisogno / vuoi supportare l'input del mouse per mancini (inversione dei pulsanti). Le implementazioni del browser sembrano fare molte ipotesi su come dovremmo usare i dispositivi di input disponibili.

Il modo più semplice per fare clic con il tasto destro è usare

 $('classx').on('contextmenu', function (event) {

 });

Tuttavia, questa non è una soluzione cross-browser, i browser si comportano diversamente per questo evento, in particolare firefox e IE. Vorrei raccomandare di seguito per una soluzione cross browser

$('classx').on('mousedown', function (event) {
    var keycode = ( event.keyCode ? event.keyCode : event.which );
    if (keycode === 3) {
       //your right click code goes here      
    }
});

Questo è il modo più semplice per attivarlo e funziona su tutti i browser ad eccezione delle visualizzazioni web dell'applicazione come (CefSharp Chromium ecc ...). Spero che il mio codice ti aiuti e buona fortuna!

const contentToRightClick=document.querySelector("div#contentToRightClick");

//const contentToRightClick=window; //If you want to add it into the whole document

contentToRightClick.oncontextmenu=function(e){
  e=(e||window.event);
  e.preventDefault();
  console.log(e);
  
  return false; //Remove it if you want to keep the default contextmenu 
}

div#contentToRightClick{
  background-color: #eee;
  border: 1px solid rgba(0,0,0,.2);
  overflow: hidden;
  padding: 20px;
  height: 150px;
}

<div id="contentToRightClick">Right click on the box !</div>

Se si desidera chiamare la funzione mentre l'evento con il tasto destro indica che è possibile utilizzare quanto segue

 <html lang="en" oncontextmenu="func(); return false;">
 </html>

<script>
function func(){
alert("Yes");
}
</script>

Questo ha funzionato con me

if (evt.xa.which == 3) 
{
    alert("Right mouse clicked");
}

Prova a usare la proprietà whiche / obutton

La demo

function onClick(e) {
  if (e.which === 1 || e.button === 0) {
    console.log('Left mouse button at ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 2 || e.button === 1) {
    console.log('Middle mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 3 || e.button === 2) {
    console.log('Right mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 4 || e.button === 3) {
    console.log('Backward mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 5 || e.button === 4) {
    console.log('Forward mouse button ' + e.clientX + 'x' + e.clientY);
  }
}
window.addEventListener("mousedown", onClick);

Alcune informazioni qui

Gestisci l'evento usando la jQuerylibreria

$(window).on("contextmenu", function(e)
{
   alert("Right click");
})

Per gestire il clic destro del mouse, è possibile utilizzare l'evento "oncontextmenu". Di seguito è riportato un esempio:

 document.body.oncontextmenu=function(event) {
     alert(" Right click! ");
 };

il codice sopra avvisa del testo quando si preme il tasto destro. Se non si desidera visualizzare il menu predefinito del browser, è possibile aggiungere return false; Alla fine del contenuto della funzione. Grazie.

Sì, è un evento mousedown javascript. C'è anche un plugin jQuery per farlo