JavaScript: Überprüfen Sie, ob die Maustaste gedrückt ist?

Gibt es eine Möglichkeit zu erkennen, ob eine Maustaste derzeit in JavaScript gedrückt ist?

Ich weiß über das "Mousedown" -Ereignis Bescheid, aber das brauche ich nicht. Einige Zeit nach dem Drücken der Maustaste möchte ich feststellen können, ob sie noch gedrückt ist.

Ist das möglich?

In Bezug auf die Lösung von Pax: Es funktioniert nicht, wenn der Benutzer absichtlich oder versehentlich auf mehr als eine Schaltfläche klickt. Frag mich nicht, woher ich das weiß :-(.

Der richtige Code sollte so lauten:

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

Mit dem Test wie folgt:

if(mouseDown){
  // crikey! isn't she a beauty?
}

Wenn Sie wissen möchten, welche Taste gedrückt wird, müssen Sie mouseDown zu einer Reihe von Zählern machen und diese separat für separate Tasten zählen:

// 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!
    }
  }
}

Seien Sie jetzt gewarnt, dass der obige Code nur für standardkonforme Browser funktioniert, die Ihnen eine Schaltflächennummer 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 denken Sie daran: IE verwendet ein globales Ereignisobjekt mit dem Namen ... "Ereignis".

Übrigens hat der IE eine in Ihrem Fall nützliche Funktion: Wenn andere Browser "Schaltfläche" nur für Maustastenereignisse (onclick, onmousedown und onmouseup) senden, sendet der IE diese auch mit onmousemove. Sie können also auf onmousemove warten, wenn Sie den Tastenstatus kennen müssen, und nach evt.button suchen, sobald Sie ihn erhalten haben - jetzt wissen Sie, welche Maustasten gedrückt wurden:

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

Natürlich bekommst du nichts, wenn sie tot spielt und sich nicht bewegt.

Relevante Links:

• MouseEvent-Taste (DOM 2)
• MSDN-Schaltfläche

Update Nr. 1 : Ich weiß nicht, warum ich den document.body-Code übernommen habe. Es ist besser, Ereignishandler direkt an das Dokument anzuhängen.

Dies ist eine alte Frage, und die Antworten hier scheinen hauptsächlich dafür zu sprechen, zu verwenden mousedownund mouseupzu verfolgen, ob eine Taste gedrückt wird. Aber wie andere bereits betont haben, mouseupwird es nur ausgelöst, wenn es im Browser ausgeführt wird, was dazu führen kann, dass der Schaltflächenstatus aus den Augen verloren wird.

Allerdings Mouseevent (jetzt) gibt an, welche Tasten sind zur Zeit gedrückt:

• Für alle modernen Browser (außer Safari) verwenden MouseEvent.buttons
• Verwenden Sie für Safari MouseEvent.which( buttonswird für Safari nicht definiert). Hinweis: whichVerwendet andere Zahlen als buttonsfür Rechts- und Mittelklicks.

Wenn auf registriert document, mousemovewird Feuer sofort, sobald der Cursor den Browser wieder eintritt, also wenn die Benutzer Mitteilungen außerhalb dann wird der Staat, sobald sie die Maus wieder in aktualisiert werden.

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), lesen Sie die MouseEvent-Dokumente. Wenn Safari sein Spiel aufhebt, sollte dies einfacher werden.

Ich denke, der beste Ansatz besteht darin, den Status der Maustaste wie folgt selbst aufzuzeichnen:

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.
}

Die Lösung ist nicht gut. Man könnte das Dokument "mousedown" und dann außerhalb des Browsers "mouseup", und in diesem Fall würde der Browser immer noch denken, dass die Maus unten ist.

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 nach oben / unten etwas klobig ist, deshalb habe ich eine Alternative gefunden, die einige ansprechen könnte.

<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>

Der: active-Selektor verarbeitet den Mausklick viel besser als die Maus nach oben / unten. Sie benötigen lediglich eine Möglichkeit, diesen Status im Ereignis onmousemove zu lesen. Dafür musste ich schummeln und mich darauf verlassen, dass der Standardcursor "auto" ist und ich ändere ihn einfach auf "default", was standardmäßig automatisch ausgewählt wird.

Sie können alles in dem Objekt verwenden, das von getComputedStyle zurückgegeben wird und das Sie als Flag verwenden können, ohne das Erscheinungsbild Ihrer Seite zu beeinträchtigen, z. B. Rahmenfarbe.

Ich hätte gerne meinen eigenen benutzerdefinierten Stil im Abschnitt: active festgelegt, aber ich konnte das nicht zum Laufen bringen. Es wäre besser, wenn es möglich wäre.

Das folgende Snippet versucht 2 Sekunden nach dem Auftreten des mouseDown-Ereignisses in document.body, die Funktion "doStuff" 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 das browserübergreifende Anhängen von Ereignissen zu verwenden. Um das Beispiel zu vereinfachen, wurden die Eigenschaften für Mousedown und Mouseup explizit festgelegt.

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, es ist auch am elegantesten:

Zum Body-Tag hinzufügen:

onmouseup="down=0;" onmousedown="down=1;"

Dann testen und ausführen, myfunction()wenn downgleich 1:

onmousemove="if (down==1) myfunction();"

Sie können @Pax und meine Antworten kombinieren, um auch die Dauer zu ermitteln, für die die Maus gedrückt 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 verfolgen ... :(

Wenn Sie auf einer komplexen Seite mit vorhandenen Maus-Ereignishandlern arbeiten, würde ich empfehlen, das Ereignis bei der Erfassung zu behandeln (anstelle von Bubble). Stellen Sie dazu einfach den 3. Parameter von addEventListenerauf true.

Darüber hinaus möchten Sie möglicherweise überprüfen, ob event.whichSie die tatsächliche Benutzerinteraktion und keine 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 anstelle von document.body zum Dokument (oder Fenster) hinzu. Body ist wichtig, da sichergestellt wird, dass Mouseup-Ereignisse außerhalb des Fensters weiterhin aufgezeichnet werden.

Verwenden Sie die MouseEvent- API, um die gedrückte Taste zu überprüfen, falls vorhanden:

document.addEventListener('mousedown', (e) => console.log(e.buttons))

Rückgabe :

Eine Zahl, die eine oder mehrere Schaltflächen darstellt. Bei mehr als einer gleichzeitig gedrückten Taste 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)

Mit jQuery behandelt die folgende Lösung sogar das "Ziehen der Seite, dann Fall freigeben".

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

Ich weiß nicht, wie es mit mehreren Maustasten umgeht. Wenn es eine Möglichkeit gäbe, den Klick außerhalb des Fensters zu starten und dann die Maus in das Fenster zu bringen, würde dies dort wahrscheinlich auch nicht richtig funktionieren.

Unterhalb des jQuery-Beispiels ändert sich die Farbe, wenn sich die Maus über $ ('. Element') befindet, je nachdem, welche Maustaste gedrückt wird.

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

Wie gesagt @Jack, wenn mouseupes außerhalb des Browserfensters passiert, sind wir uns dessen nicht bewusst ...

Dieser Code hat (fast) bei mir funktioniert:

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

Leider werde ich die mouseupVeranstaltung in einem dieser Fälle nicht bekommen :

• 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 zwei Maustasten gleichzeitig, gibt eine Maustaste und dann die andere Taste frei, beide außerhalb des Browserfensters.

Nun, Sie können nicht überprüfen, ob es nach dem Ereignis nicht funktioniert, aber Sie können überprüfen, ob es aktiv ist. Wenn es aktiv ist, bedeutet dies, dass es nicht mehr deaktiviert ist: P lol

Der Benutzer drückt also die Taste nach unten (Ereignis onMouseDown) ... und danach prüfen Sie, ob es aktiv ist (onMouseUp). Während es nicht läuft, können Sie tun, was Sie brauchen.

        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

Diese browserübergreifende Version funktioniert gut für mich.