Wie zu erkennen, wenn ein Gerät über Maus-Unterstützung?

Derzeit nutze ich den folgenden test (entnommen aus Modernizr) zu erkennen, touch-Unterstützung:

function is_touch_device() {
    var bool;
    if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        bool = true;
    } else {
        injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{#modernizr{top:9px;position:absolute}}'].join(''), function(node) {
            bool = node.offsetTop === 9;
        });
    }
    return bool;
}

Aber einige Geräte sind sowohl für touch-und Maus-driven, also möchte ich eine seperate Funktion zum erkennen, ob ein Gerät über Maus-Unterstützung. Was ist ein guter Weg, um diese überprüfung zu tun?

Letztlich meine Absicht ist es, in der Lage, das zu tun diese:

if(is_touch_device())

if(has_mouse_support())

if(is_touch_device() && has_mouse_support())

Während Sie keine Antwort auf Ihre Frage explizit zu, ich fand diesen Artikel interessant wrt touch vs. Maus-Unterstützung: html5rocks.com/en/mobile/touchandmouse
Ungetestet (und funktioniert nur, wenn die Maus tatsächlich bewegt wird): var Maus= false; Fenster.onmousemove = function(){Maus= true}
Clever, ich denke, dass sollte funktionieren, aber darauf wartet, dass ein mehr getestet, Antwort falls jemand eine Lösung bekannt ist. Edit: das ist wahr, es wird falsch positiv, wenn die Maus nicht mehr bewegen kann, hmmm.
wenn jemand nie wackelt die Maus, die Sie wohl lieber andere Modi der Interaktion sowieso...
Mhm. Nach html5rocks.com/en/mobile/touchandmouse/#toc-1 meine Lösung nicht funktioniert. Verdammt 🙂 Hier ist eine lange Diskussion über das Thema: github.com/Modernizr/Modernizr/issues/869 Scheint, wie es gibt nicht eine gute Lösung

InformationsquelleAutor TK123 | 2014-01-10

javascript jquery

9

Gibt es eine CSS-media für genau das!

Können Sie überprüfen, ob irgendein Gerät hat eine Maus, indem man den Wert der pointer CSS-media-Funktion:
```
if (matchMedia('(pointer:fine)').matches) {
  //Device has a mouse
}
```
Weil es die CSS, die Sie nicht sogar brauchen, um die JavaScript verwenden:
```
@media (pointer: fine) {
  /* Rules for devices with mouse here */
}
```
So genial, dass ich dachte, Funktion wie diese würde groß sein, aber nie gehofft, es würde wirklich existieren!

InformationsquelleAutor josemmo
7

Ich bin derzeit mit den folgenden (jQuery), und ich habe nicht gefunden, keine Fehler, noch auf bestimmte Geräte
```
$(window).bind('mousemove.hasMouse',function(){
    $(window).unbind('.hasMouse');
    agent.hasMouse=true;
}).bind('touchstart.hasMouse',function(){
    $(window).unbind('.hasMouse');
    agent.hasMouse=false;
});
```
Erklärung: Mäuse (auch touch-screen-laptops) erste Feuer mousemove, bevor Sie feuern können touchstart und hasMouse auf TRUE gesetzt ist. Touch-Geräte (auch zum Beispiel iOS, die feuert mousemove) ERSTE Feuer touchstart auf klicken Sie auf, und dann mousemove. Dann ist der Grund, warum hasMouse wird auf FALSE gesetzt werden.

Der einzige Haken ist, dass dies hängt davon ab, Benutzer-Interaktion, der Wert wird nur korrekt sein, nach der Maus verschieben oder touchstart so nicht trauen zu verwenden, die beim laden der Seite.

$(window).one('mousemove',function(){agent.hasMouse=true}).one('touchstart',function(){agent.hasMouse=false});

InformationsquelleAutor Hacktisch
2

Als in der Frage genannten Kommentare, die speziell auf https://github.com/Modernizr/Modernizr/issues/869, es gibt keine gute Antwort noch.

Ich wirklich nur das als Antwort, damit 'offiziell' markieren diese andere Frage als Duplikat
Was über die Prüfung auf das Vorhandensein der Fenster.MouseEvent als diesem Kommentar schlägt?
Umschreibung von ein paar Kommentare unter der, die du verlinkt: inkonsistente Verhalten mit tablets, insbesondere das iPad und Surface

InformationsquelleAutor drzaus

var clickHandler = (isMouseEventSupported('click') ? 'click' : 'touchstart');

function isMouseEventSupported(eventName) {
    var element = document.createElement('div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in element);
    if (!isSupported) {
       element.setAttribute(eventName, 'return;');
       isSupported = typeof element[eventName] == 'function';
    }
    element = null;
    return isSupported;
}

Dies ist der code von einem Freund/Kollege von mir und er stützte ihn ab von: http://perfectionkills.com/detecting-event-support-without-browser-sniffing/

Ich bin mir ziemlich sicher, dass alle touch-Geräte unterstützen die onclick-events... Das bedeutet nicht, dass Sie eine Maus.

InformationsquelleAutor DeveloperJRowe

0

Gibt es keine unmittelbare Möglichkeit, zu wissen, Sie müssen warten, bis ein touch-event oder ein Maus-Ereignis.

Vorausgesetzt, Sie wollen zu erkennen entweder Maus oder touch können Sie Folgendes: hören touchstart und mousemove (letzteres kann Feuer auf touch-Geräten ohne eine tatsächliche Maus). Je nachdem was man feuert zuerst ist zu 99% gebunden werden, was du bist suchen für.

Diese nicht in Betracht, Geräte, die tatsächlich beides haben.
```
document.addEventListener('mousemove', onMouseMove, true)
document.addEventListener('touchstart', onTouchStart, true)
function onTouchStart(){
  removeListeners()
  //touch detected: do stuff
}
function onMouseMove(){
  removeListeners()
  //mouse detected: do stuff
}
function removeListeners(){
  document.removeEventListener('mousemove', onMouseMove, true)
  document.removeEventListener('touchstart', onTouchStart, true)
}
```
InformationsquelleAutor Sjeiti
0

Antwort von @josemmo ist nicht für mich arbeiten: auf android-Handy mit der Maus befestigt matchMedia('(pointer:fine)').matches nicht entspricht.

Glücklicherweise habe ich erfolgreich mit einem anderen media-Abfrage: hover.
```
if (matchMedia('(hover:hover)').matches) {
  //Device has a mouse
}
```
InformationsquelleAutor johndoe

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.