Wie erkennen rechte Maustaste auslösen Ereignis in Javascript?

Question

Ich benutze mouseup Ereignis im Moment, aber es funktioniert nicht für mich.

Ich verwende mousedown Ereignis für die linke Presse und contextmenu Ereignis für die rechte Presse.

Hier ist mein Code:

window.addEventListener('mouseup', e => { 
    e.preventDefault(); 
    speedDown(); 
}, true); 

speedDown() ist eine Funktion für meine Sprite seine Geschwindigkeit zu verlangsamen. Links drücken und rechts drücken sollte die Geschwindigkeit meines Sprites auf die gleiche Weise erhöhen. Wenn ich den Knopf loslasse, wird mein Sprite langsamer. Aber wenn ich den obigen Code benutze, wenn ich meine linke Maustaste loslasse, beschleunigt er sich, aber er wird nicht langsamer, wenn ich den rechten Knopf loslasse, nachdem ich ihn ein paar Sekunden gedrückt habe, also muss ich den linken Knopf drücken und ihn loslassen triggert das mouseup Ereignis.

Irgendwelche Vorschläge?

Answer 1

Sieht so aus, als ob Sie eine Kombination aus der Deaktivierung der contextmenu (wenn Sie können, erlauben einige Browser es nicht) und mouseup. Es ist auch nützlich, den Benutzer anzuklicken, der nicht vom Benutzer ausgewählt werden kann (more here), so dass wiederholte Klicks keinen Text auswählen.

Das ist für mich auf Chrome funktioniert, siehe Kommentare:

// Avoid the context menu popup 
 
window.addEventListener("contextmenu", function(e) { 
 
    e.preventDefault(); 
 
}, false); 
 

 
// Listen for mouseup 
 
window.addEventListener("mouseup", function(e) { 
 
    switch (e.button) { 
 
    case 0: // Primary button ("left") 
 
     speedUp(); 
 
     break; 
 
    case 2: // Secondary button ("right") 
 
     speedDown(); 
 
     break; 
 
    } 
 
}, false); 
 

 
// Current speed 
 
var speed = 0; 
 
showSpeed(); 
 

 
// Speed functions 
 
function speedUp() { 
 
    ++speed; 
 
    showSpeed(); 
 
} 
 

 
function speedDown() { 
 
    --speed; 
 
    showSpeed(); 
 
} 
 

 
function showSpeed() { 
 
    document.getElementById("speed").innerHTML = speed; 
 
}

/* From https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css */ 
 
body { 
 
    -webkit-touch-callout: none; /* iOS Safari */ 
 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
    -khtml-user-select: none; /* Konqueror */ 
 
     -moz-user-select: none; /* Firefox */ 
 
     -ms-user-select: none; /* Internet Explorer/Edge */ 
 
      user-select: none; /* Non-prefixed version, currently 
 
            not supported by any browser */ 
 
}

<div>Current speed: <span id="speed">0</span> 
 
</div> 
 
<div>Left-click to speed up</div> 
 
<div>Right-click to slow down</div>

Hier ist ein einfacheres Beispiel Erfassen nur zeigen, wenn Maustasten gedrückt und freigegeben:

// Avoid the context menu popup 
 
window.addEventListener("contextmenu", function(e) { 
 
    e.preventDefault(); 
 
}, false); 
 

 
// Listen for mousedown 
 
window.addEventListener("mousedown", function(e) { 
 
    handle(e, true); 
 
}, false); 
 

 
// Listen for mouseup 
 
window.addEventListener("mouseup", function(e) { 
 
    handle(e, false); 
 
}, false); 
 

 
// Our main handler 
 
function handle(e, down) { 
 
    var id; 
 
    switch (e.button) { 
 
    case 0: // Primary button ("left") 
 
     id = "primary-status"; 
 
     break; 
 
    case 2: // Secondary button ("right") 
 
     id = "secondary-status"; 
 
     break; 
 
    } 
 
    if (id) { 
 
    document.getElementById(id).innerHTML = down ? "Down" : "Up"; 
 
    } 
 
}

/* From https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css */ 
 
body { 
 
    -webkit-touch-callout: none; /* iOS Safari */ 
 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
    -khtml-user-select: none; /* Konqueror */ 
 
     -moz-user-select: none; /* Firefox */ 
 
     -ms-user-select: none; /* Internet Explorer/Edge */ 
 
      user-select: none; /* Non-prefixed version, currently 
 
            not supported by any browser */ 
 
}

<div> 
 
    Primary ("left") mouse button: 
 
    <span id="primary-status">Unknown</span> 
 
</div> 
 
<div> 
 
    Secondary ("right") mouse button: 
 
    <span id="secondary-status">Unknown</span> 
 
</div>

---

Exkurs: Viele Benutzer konfigurieren ihre Mäuse, so dass Halte beide Tasten Sie die mittlere Taste simuliert (e.button == 1). Möglicherweise müssen Sie damit umgehen ...