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

Question

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

Ich kenne das „Mousedown“-Ereignis, aber das ist nicht das, was ich brauche.Einige Zeit NACH dem Drücken der Maustaste möchte ich erkennen können, ob die Maustaste noch gedrückt ist.

Ist das möglich?

Answer 1

Lösung ‚Pax In Bezug auf: es funktioniert nicht, wenn Benutzer mehr als eine Taste absichtlich oder versehentlich klickt. Fragen Sie mich nicht, wie ich weiß -. (

Der richtige Code sollte so sein:

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

Mit dem Test wie folgt aus:

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

Wenn Sie wissen wollen, welche Taste gedrückt wird, hergestellt werden mouseDown- eine Reihe von Zählern zu machen und sie 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 gedrückt wurden genau:

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 seien Sie gewarnt, dass der Code oben nur für standardkonformen Browsern funktionieren würde, die Sie auf eine Schaltfläche Zahl von 0 und Anfahren passieren. IE verwendet eine Bitmaske zur Zeit gedrückt Tasten:

• 0 für "nichts gedrückt wird"
• 1 für links
• 2 für Recht
• 4 für mittlere
• und eine beliebige Kombination von oben, zum Beispiel 5 für links + Mitte

So stellen Sie Ihren Code entsprechend! Ich lasse es als eine Übung.

Und denken Sie daran:. IE verwendet ein globales Ereignis-Objekt namens ... "Ereignis"

Im übrigen IE verfügt über eine Funktion, die in Ihrem Fall: wenn anderer Browser „Knopf“ nur für Maustaste Ereignisse senden (Onclick, onmousedown und onmouseup), IE sendet sie mit onmousemove auch. So können Sie für onmousemove hören beginnen, wenn Sie auf die Schaltfläche Zustand wissen müssen, und prüfen, ob evt.button sobald Sie es bekommen - 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 bekommen Sie nichts, wenn sie tot spielt und sich nicht bewegt.

Relevante Links:

• Mouse der Schaltfläche (DOM 2)
• MSDN-Taste

Update # 1 : Ich weiß nicht, warum ich über den document.body-Stil des Code ausgeführt. Es wird besser sein, um Event-Handler direkt an das Dokument anhängen.

Answer 2

Dies ist eine alte Frage, und die Antworten hier scheinen größtenteils für die Verwendung zu sprechen mousedown Und mouseup um zu verfolgen, ob eine Taste gedrückt wird.Aber wie andere bereits betont haben, mouseup wird nur ausgelöst, wenn es im Browser ausgeführt wird, was dazu führen kann, dass der Überblick über den Schaltflächenstatus verloren geht.

Jedoch, MouseEvent (jetzt) ​​zeigt an, welche Tasten derzeit gedrückt sind:

• Für alle modernen Browser (außer Safari) einsetzbar MouseEvent.buttons
• Für Safari verwenden Sie MouseEvent.which (buttons wird für Safari undefiniert sein) Hinweis: which verwendet andere Zahlen von buttons für Rechts- und Mittelklicks.

Bei Registrierung am document, mousemove wird sofort ausgelöst, sobald der Cursor wieder in den Browser gelangt. Wenn der Benutzer also draußen loslässt, wird der Status aktualisiert, sobald er mit der Maus wieder hinein fährt.

Eine einfache Implementierung könnte so 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 Tasten/mehrere Tasten/Steuertasten), schauen Sie sich die MouseEvent-Dokumente an.Wenn Safari seine Leistung verbessert, sollte dies einfacher werden.

Answer 3

Ich denke, der beste Ansatz ist dies Ihre eigene Aufzeichnung der Maustaste Zustand zu halten, wie folgt:

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

und dann später im Code:

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

Answer 4

Die Lösung ist nicht gut. man könnte „mousedown-“ auf dem Dokument, dann „mouseup“ außerhalb des Browsers, und auf diesem Fall würde der Browser immer noch die Maus sein Denken nach unten ist.

die einzige gute Lösung verwendet IE.event Objekt.

Answer 5

Ich weiß, dass dies eine alte Post, aber ich dachte, die Verfolgung der Maustaste der Maus nach oben / unten ein bisschen klobig fühlte, so fand ich eine Alternative, die auf einige ansprechen kann.

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

Die: aktiven Wähler behandeln den per Mausklick viel besser als Maus nach oben / unten, brauchen Sie nur einen Weg, diesen Zustand in dem onmousemove Ereignisse zu lesen. Dafür musste ich auf die Tatsache, betrügen und verließ sich, dass die Standard-Cursor „auto“ ist und ich es nur auf „default“ ändern, das ist, was durch die automatische Voreinstellung ausgewählt wird.

Sie können alles in dem Objekt verwenden, die von getComputedStyle zurückgegeben wird, die Sie als Fahne ohne Stauchen das Aussehen Ihrer Seite verwenden können, z border-color.

Ich würde meinen eigenen benutzerdefinierten Stil im einzustellen haben mag: aktiv Abschnitt, aber ich konnte sie nicht an der Arbeit. Es wäre besser, wenn es möglich ist.

Answer 6

Das folgende Snippet wird versuchen, das „doStuff“ -Funktion 2 Sekunden ausgeführt werden, nachdem das mouseDown- Ereignis in document.body auftritt. Wenn der Benutzer die Taste hebt, wird das mouseUp Ereignis auftreten und die verzögerte Ausführung abzubrechen.

Ich rate würde eine Methode für Cross-Browser-Ereignis Befestigung mit - Einstellung des mousedown- und mouseup Eigenschaften wurden ausdrücklich getan, 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);
}

Answer 7

Kurz und gut

Ich bin mir nicht sicher, warum keine der bisherigen Antworten für mich gearbeitet, aber ich kam mit dieser Lösung während eines Heureka Moment auf. Es ist nicht nur funktioniert, aber es ist auch eleganteste:

In dem Body-Tag:

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

Dann testen und ausführen myfunction() wenn down 1 gleich:

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

Answer 8

Sie können @Pax und meine Antworten kombinieren auch die Dauer zu erhalten, die die Maus wurde nach unten:

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
}

Answer 9

Sie müssen die MouseDown- und MouseUp und stellen einige Flaggen oder etwas zu handhaben, es zu verfolgen „später auf der Straße“ ...: (

Answer 10

Mit jQuery, die folgenden Lösung behandelt die auch „die Seite dann loslassen Fall zieht aus“.

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

Ich weiß nicht, wie es mehrere Maustasten behandelt. Wenn es eine Möglichkeit gäbe den Klick außerhalb des Fensters zu starten, dann bringen Sie die Maus in das Fenster, dann würde dies wahrscheinlich nicht richtig funktionieren, da.

Answer 11

Unter jQuery Beispiel, wenn die Maus über $ ist ( ‚Element‘), Farbe ändert sich 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();
});

Answer 12

Wie gesagt @Jack, wenn mouseup außerhalb des Browserfensters geschieht, sind wir nicht bewusst ist ...

Dieser Code (fast) arbeitete für mich:

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

Leider habe ich nicht die mouseup Ereignis in einem dieser Fälle erhalten:

• Benutzer gleichzeitig drückt eine Taste der Tastatur und eine Maustaste, gibt Maustaste außerhalb des Browser-Fensters gibt dann drücken.
• Benutzer drückt zwei Maustasten gleichzeitig, gibt eine Maustaste dann die andere, die beide außerhalb des Browserfensters an.

Answer 13

Wenn Sie sich in einer komplexen Seite mit bestehenden Maus-Event-Handler arbeiten, würde ich empfehlen, die Event-Handling auf capture (statt Blase). Um dies zu tun, setzen Sie einfach den dritten Parameter von addEventListener true.

Darüber hinaus können Sie für event.which zu überprüfen, um sicherzustellen, sind Sie tatsächlich Interaktion mit dem Benutzer die Handhabung und keine Mausereignisse, z.B. 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 Dokument (oder Fenster) statt document.body wichtig ist b / c ist sichergestellt, dass mouseup Ereignisse außerhalb des Fensters sind noch aufgezeichnet.

Answer 14

Nun, man kann nicht überprüfen, ob es nach unten nach der Veranstaltung, aber Sie können prüfen, ob es nach oben ist ... Wenn es ist .. es bedeutet, dass nicht mehr nach unten ist: P lol

So ist der Benutzer den Knopf drückt nach unten (onMouseDown Ereignisse) ... und danach, Sie zu prüfen, ob up (onMouseUp). Es ist zwar nicht hoch ist, können Sie tun, was Sie brauchen.

Answer 15

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

Dieses Cross-Browser-Version funktioniert gut für mich.