JavaScript: Prüfen Sie, ob die Maustaste gedrückt ist.
Gibt es eine Möglichkeit zu erkennen, ob in JavaScript derzeit eine Maustaste gedrückt ist?
Ich weiß über das "Mousedown" -Event Bescheid, aber das brauche ich nicht. Irgendwann NACH dem Drücken der Maustaste möchte ich feststellen können, ob sie noch gedrückt ist.
Ist das möglich?
Zur Lösung von Pax: Es funktioniert nicht, wenn der Benutzer absichtlich oder aus Versehen auf mehr als eine Schaltfläche klickt. Fragen Sie mich nicht, woher ich weiß :-(.
Der korrekte Code sollte so sein:
var mouseDown = 0;
document.body.onmousedown = function() {
++mouseDown;
}
document.body.onmouseup = function() {
--mouseDown;
}
Mit dem Test so:
if(mouseDown){
// crikey! isn't she a beauty?
}
Wenn Sie wissen möchten, welche Taste gedrückt wird, bereiten Sie sich vor, mouseDown zu einem Array von Zählern zu machen, und zählen Sie diese separat für separate Tasten:
// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
mouseDownCount = 0;
document.body.onmousedown = function(evt) {
++mouseDown[evt.button];
++mouseDownCount;
}
document.body.onmouseup = function(evt) {
--mouseDown[evt.button];
--mouseDownCount;
}
Jetzt können Sie überprüfen, welche Tasten genau gedrückt wurden:
if(mouseDownCount){
// alright, let's lift the little bugger up!
for(var i = 0; i < mouseDown.length; ++i){
if(mouseDown[i]){
// we found it right there!
}
}
}
Nun sei gewarnt, dass der obige Code nur für standardkonforme Browser funktioniert, die eine Tastennummer ab 0 übergeben. IE verwendet eine Bitmaske der aktuell gedrückten Tasten:
- 0 für "nichts wird gedrückt"
- 1 für links
- 2 für rechts
- 4 für Mitte
- und eine beliebige Kombination von oben, z. B. 5 für links + Mitte
Passen Sie also Ihren Code entsprechend an! Ich lasse es als Übung.
Und denk dran: IE verwendet ein globales Ereignisobjekt namens… "event".
Übrigens hat IE eine Funktion, die in Ihrem Fall nützlich ist: Wenn andere Browser "button" nur für Maustastenereignisse (onclick, onmousedown und onmouseup) senden, sendet IE diese Option auch mit onmousemove. Sie können also sofort auf onmousemove hören, wenn Sie den Status der Schaltfläche kennen müssen, und sobald Sie es erhalten haben, können Sie nach evt.button suchen.
// for IE only!
document.body.onmousemove = function(){
if(event.button){
// aha! we caught a feisty little sheila!
}
};
Natürlich bekommt man nichts, wenn sie tot spielt und sich nicht bewegt.
Relevante Links:
Update # 1: Ich weiß nicht, warum ich den Code im body-style document übernommen habe. Es ist besser, Event-Handler direkt an das Dokument anzuhängen.
Ich denke, der beste Ansatz dafür ist, wie Sie den Status der Maustasten festhalten:
var mouseDown = 0;
document.body.onmousedown = function() {
mouseDown = 1;
}
document.body.onmouseup = function() {
mouseDown = 0;
}
und dann später in Ihrem Code:
if (mouseDown == 1) {
// the mouse is down, do what you have to do.
}
Dies ist eine alte Frage, und die Antworten hier scheinen vor allem für die Verwendung von mousedown und mouseup zu sprechen, um zu verfolgen, ob eine Taste gedrückt wird. Wie andere bereits erwähnt haben, wird mouseup nur ausgelöst, wenn sie im Browser ausgeführt wird. Dies kann dazu führen, dass der Status der Schaltfläche nicht mehr angezeigt wird.
MouseEvent (now) gibt jedoch an, welche Tasten gerade gedrückt sind:
- Für alle modernen Browser (außer Safari) verwenden Sie
MouseEvent.buttons - Verwenden Sie für Safari
MouseEvent.which(buttonsist für Safari undefiniert). Hinweis:whichverwendet andere Zahlen alsbuttonsfür Rechts- und Mittelklicks.
Bei der Registrierung unter document wird mousemove sofort ausgelöst, sobald der Cursor den Browser erneut betritt. Wenn der Benutzer den Browser außerhalb freigibt, wird der Status aktualisiert, sobald er wieder mit der Maus verbunden ist.
Eine einfache Implementierung könnte folgendermaßen aussehen:
var leftMouseButtonOnlyDown = false;
function setLeftButtonState(e) {
leftMouseButtonOnlyDown = e.buttons === undefined
? e.which === 1
: e.buttons === 1;
}
document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;
Wenn kompliziertere Szenarien erforderlich sind (verschiedene Schaltflächen/mehrere Schaltflächen/Steuertasten), überprüfen Sie die MouseEvent-Dokumente. Wenn Safari das Spiel hebt, sollte dies einfacher werden.
die Lösung ist nicht gut .. Man könnte auf dem Dokument "mousedown" und dann "mouseup" außerhalb des Browsers, und in diesem Fall würde der Browser immer noch denken, dass die Maus nicht funktioniert.
die einzig gute Lösung ist die Verwendung des IE.event-Objekts.
Ich weiß, dass dies ein alter Beitrag ist, aber ich dachte, dass das Verfolgen der Maustaste mit der Maus auf/ab ein wenig klobig erscheint, also habe ich eine Alternative gefunden, die einige anspricht.
<style>
div.myDiv:active {
cursor: default;
}
</style>
<script>
function handleMove( div ) {
var style = getComputedStyle( div );
if (style.getPropertyValue('cursor') == 'default')
{
// You're down and moving here!
}
}
</script>
<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>
Mit dem aktiven Selektor können Sie den Mausklick viel besser handhaben als mit der Maus nach oben/unten. Sie benötigen nur eine Möglichkeit, diesen Zustand im Ereignis onmousemove zu lesen. Dafür musste ich schummeln und habe mich darauf verlassen, dass der Standardcursor "auto" ist und ich ihn einfach in "default" ändere, was automatisch von default ausgewählt wird.
Sie können alles in dem von getComputedStyle zurückgegebenen Objekt verwenden, das Sie als Flag verwenden können, ohne das Erscheinungsbild Ihrer Seite zu beeinträchtigen, z. Randfarbe.
Ich hätte gerne meinen eigenen benutzerdefinierten Stil im: aktiven Bereich festgelegt, aber ich konnte das nicht zum Laufen bringen. Es wäre besser, wenn es möglich ist.
Das folgende Snippet versucht, die "doStuff" -Funktion 2 Sekunden nach dem mouseDown-Ereignis in document.body auszuführen. Wenn der Benutzer die Schaltfläche anhebt, tritt das mouseUp-Ereignis auf und bricht die verzögerte Ausführung ab.
Ich würde empfehlen, eine Methode für die browserübergreifende Ereignisanfügung zu verwenden - das explizite Festlegen der Eigenschaften von Mausedown und Mouseup wurde vorgenommen, um das Beispiel zu vereinfachen.
function doStuff() {
// does something when mouse is down in body for longer than 2 seconds
}
var mousedownTimeout;
document.body.onmousedown = function() {
mousedownTimeout = window.setTimeout(doStuff, 2000);
}
document.body.onmouseup = function() {
window.clearTimeout(mousedownTimeout);
}
Kurz und bündig
Ich bin mir nicht sicher, warum keine der vorherigen Antworten für mich funktioniert hat, aber ich habe diese Lösung in einem Eureka-Moment gefunden. Es funktioniert nicht nur, sondern ist auch am elegantesten:
Zum Body-Tag hinzufügen:
onmouseup="down=0;" onmousedown="down=1;"
Dann testen und führen Sie myfunction() aus, wenn down gleich 1 ist:
onmousemove="if (down==1) myfunction();"
Sie können @Pax und meine Antworten kombinieren, um die Dauer zu erhalten, für die die Maus heruntergefahren wurde:
var mousedownTimeout,
mousedown = 0;
document.body.onmousedown = function() {
mousedown = 0;
window.clearInterval(mousedownTimeout);
mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}
document.body.onmouseup = function() {
mousedown = 0;
window.clearInterval(mousedownTimeout);
}
Dann später:
if (mousedown >= 2000) {
// do something if the mousebutton has been down for at least 2 seconds
}
Sie müssen mit MouseDown und MouseUp umgehen und ein Flag oder etwas setzen, um es "später auf der Straße" zu finden ... :(
Wenn sich der Mauszeiger über $ ('. Element') befindet, ändert sich die Farbe abhängig von der gedrückten Maustaste.
var clicableArea = {
init: function () {
var self = this;
('.element').mouseover(function (e) {
self.handlemouseClick(e, $(this));
}).mousedown(function (e) {
self.handlemouseClick(e, $(this));
});
},
handlemouseClick: function (e, element) {
if (e.buttons === 1) {//left button
element.css('background', '#f00');
}
if (e.buttons === 2) { //right buttom
element.css('background', 'none');
}
}
};
$(document).ready(function () {
clicableArea.init();
});
Wenn Sie innerhalb einer komplexen Seite mit vorhandenen Mausereignishandlern arbeiten, würde ich empfehlen, das Ereignis mit Capture (anstelle von Bubble) zu behandeln. Dazu setzen Sie einfach den 3. Parameter von addEventListener auf true.
Darüber hinaus möchten Sie möglicherweise nach event.which Suchen, um sicherzustellen, dass Sie die tatsächliche Benutzerinteraktion und nicht Mausereignisse verarbeiten, z. elem.dispatchEvent(new Event('mousedown')).
var isMouseDown = false;
document.addEventListener('mousedown', function(event) {
if ( event.which ) isMouseDown = true;
}, true);
document.addEventListener('mouseup', function(event) {
if ( event.which ) isMouseDown = false;
}, true);
Fügen Sie den Handler zu Dokument (oder Fenster) hinzu, anstatt zu document.body. Dies ist wichtig, da sichergestellt wird, dass Mouseup-Ereignisse außerhalb des Fensters weiterhin aufgezeichnet werden.
Verwenden Sie die API MouseEvent , um die gedrückte Taste zu überprüfen, falls vorhanden:
document.addEventListener('mousedown', (e) => console.log(e.buttons))Return :
Eine Zahl, die eine oder mehrere Schaltflächen darstellt. Wenn mehr als eine Taste gleichzeitig gedrückt wird, werden die Werte kombiniert (z. B. 3 ist primär + sekundär).
0 : No button or un-initialized 1 : Primary button (usually the left button) 2 : Secondary button (usually the right button) 4 : Auxilary button (usually the mouse wheel button or middle button) 8 : 4th button (typically the "Browser Back" button) 16 : 5th button (typically the "Browser Forward" button)
Wie gesagt, wenn sich mouseup außerhalb des Browserfensters befindet, wissen wir nichts davon ...
Dieser Code hat (fast) für mich funktioniert:
window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);
Leider erhalte ich das Ereignis mouseup in einem dieser Fälle nicht:
- der Benutzer drückt gleichzeitig eine Tastaturtaste und eine Maustaste, lässt die Maustaste außerhalb des Browserfensters los und gibt dann die Taste frei.
- der Benutzer drückt gleichzeitig zwei Maustasten, lässt eine Maustaste los, dann die andere, beide außerhalb des Browserfensters.
Mit jQuery kann die folgende Lösung auch das "Ziehen von der Seite und dann die Freigabe des Falls" verwenden.
$(document).mousedown(function(e) {
mouseDown = true;
}).mouseup(function(e) {
mouseDown = false;
}).mouseleave(function(e) {
mouseDown = false;
});
Ich weiß nicht, wie mit mehreren Maustasten umgegangen wird. Wenn es eine Möglichkeit gab, den Klick außerhalb des Fensters zu starten, die Maus in das Fenster zu bringen, würde dies wahrscheinlich auch dort nicht richtig funktionieren.