Détecter que le navigateur n'a pas de souris et est uniquement tactiles

Comment à l'écoute pour un événement mousemove sur le document. Ensuite, jusqu'à entendre cet événement vous supposez que l'appareil est tactile ou clavier uniquement.

var mouseDetected = false;
function onMouseMove(e) {
  unlisten('mousemove', onMouseMove, false);
  mouseDetected = true;
  //initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);

(Où listen et unlisten délégué à addEventListener ou attachEvent selon le cas).

J'espère que cela ne le conduise pas à trop de visual jank, il serait sucer si vous avez besoin massif de re-mises en page basées sur le mode...

À partir de 2018, il y a un bon et fiable pour détecter si le navigateur a une souris (ou autre périphérique d'entrée): CSS4 interaction avec les médias fonctionnalités qui sont désormais pris en charge par presque n'importe quel navigateur moderne (sauf IE 11 et spécial les navigateurs mobiles).

W3C:

Le pointeur de la fonctionnalité de média est utilisé pour interroger la présence et l'exactitude
d'un dispositif de pointage tel qu'une souris.

Voir les options suivantes:

    /* The primary input mechanism of the device includes a 
pointing device of limited accuracy. */
    @media (pointer: coarse) { ... }

    /* The primary input mechanism of the device 
includes an accurate pointing device. */
    @media (pointer: fine) { ... }

    /* The primary input mechanism of the 
device does not include a pointing device. */
    @media (pointer: none) { ... }

    /* Primary input mechanism system can 
       hover over elements with ease */
    @media (hover: hover) { ... }

    /* Primary input mechanism cannot hover 
       at all or cannot conveniently hover 
       (e.g., many mobile devices emulate hovering
       when the user performs an inconvenient long tap), 
       or there is no primary pointing input mechanism */
    @media (hover: none) { ... }

    /* One or more available input mechanism(s) 
       can hover over elements with ease */
    @media (any-hover: hover) { ... }


    /* One or more available input mechanism(s) cannot 
       hover (or there are no pointing input mechanisms) */
    @media (any-hover: none) { ... }

Requêtes de média peut également être utilisé en JS:

if(window.matchMedia("(any-hover: none)").matches) {
    //do sth
}

Connexes:

Officiel du projet de travail: https://drafts.csswg.org/mediaqueries/#mf-interaction

Prise en charge du navigateur: https://caniuse.com/#search=media%20features

Problème similaire: Détecter si un périphérique client prend en charge :hover et :focus unis

Quand Les Media Queries Niveau 4 est disponible dans les navigateurs, nous serons en mesure d'utiliser le "pointeur" et "hover" requêtes à détecter les périphériques avec une souris.

Si l'on veut vraiment communiquer que des informations sur Javascript, nous pourrions utiliser un CSS requête pour définir des styles spécifiques selon le type d'appareil, puis utilisez getComputedStyle en Javascript pour lire ce style, et de dériver de l'appareil d'origine type de il.

Mais une souris peut être connecté ou débranché à tout moment, l'utilisateur peut vouloir basculer entre les toucher et de la souris. Donc, nous pouvons avoir besoin de détecter ce changement, et d'offrir à l'interface de changement ou de le faire automatiquement.

@SamuelRossille Pas les navigateurs que je suis au courant exposent l'existence (ou l'absence) d'une souris, malheureusement.

Donc, avec cela étant dit, nous avons juste à essayer de le faire le mieux que nous pouvons avec notre option... événements. Je sais que c'est pas exactement ce que vous cherchez... ont convenu qu'il est actuellement loin d'être idéal.

Nous pouvons faire de notre mieux pour déterminer si un utilisateur est à l'aide d'une souris ou de toucher à un moment donné. Voici un rapide exemple à l'aide de jQuery & knock-out:

//namespace
window.ns = {};

//for starters, we'll briefly assume if touch exists, they are using it - default behavior
ns.usingTouch = ko.observable(Modernizr.touch); //using Modernizr here for brevity.  Substitute any touch detection method you desire

//now, let's sort out the mouse
ns.usingMouse = ko.computed(function () {
    //touch
    if (ns.usingTouch()) {
        //first, kill the base mousemove event
        //I really wish browsers would stop trying to handle this within touch events in the first place
        window.document.body.addEventListener('mousemove', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }, true);

        //remove mouse class from body
        $('body').removeClass("mouse");

        //switch off touch listener
        $(document).off(".ns-touch");

        //switch on a mouse listener
        $(document).on('mousemove.ns-mouse', function (e) {
            if (Math.abs(window.lastX - e.clientX) > 0 || window.lastY !== e.clientY) {
                ns.usingTouch(false);  //this will trigger re-evaluation of ns.usingMouse() and result in ns.usingMouse() === true
            }
        });

        return false;
    }
    //mouse
    else {
        //add mouse class to body for styling
        $('body').addClass("mouse");

        //switch off mouse listener
        $(document).off(".ns-mouse");

        //switch on a touch listener
        $(document).on('touchstart.ns-touch', function () { ns.usingTouch(true) });

        return true;
    }
});

//tests:
//ns.usingMouse()
//$('body').hasClass('mouse');

Vous pouvez maintenant bind/abonnez-vous à usingMouse() & usingTouch() et/ou le style de votre interface avec le corps.souris classe. Le d'interface basculer en arrière dès que le curseur de la souris est détectée et sur les évènements touchstart.

J'espère que nous aurons de meilleures options à partir du navigateur vendeurs bientôt.

Pourquoi ne pas vous venez de détecter si elle a la capacité de sentir les touches et/ou de réagir aux mouvements de la souris?

//This will also return false on
//touch-enabled browsers like Chrome
function has_touch() {
  return !!('ontouchstart' in window);
}

function has_mouse() {
  return !!('onmousemove' in window);
}

le principal problème que je vois ici, c'est que la plupart des appareils tactiles feu un événement de souris avec la touche correspondant à un (évènements touchstart -> mousedown, touchmove -> mousemove, etc).
Pour le clavier seuls, enfin pour les modernes, ils ont un générique du navigateur de sorte que vous pouvez même pas détecter la présence de la classe MouseEvent.

Le moins pénible solution ici serait, à mon avis, pour afficher un menu au lancement (avec " alt " de gestion pour le clavier seuls les utilisateurs) et peut-être stocker le choix avec localStorage/cookies/server-side ou d'autre pour garder la salme choix la prochaine fois que le visiteur venu.

Comme d'autres l'ont souligné, définitivement détecter si oui ou non ils ont une souris n'est pas fiable. Cela peut facilement changer en fonction de l'appareil. C'est certainement quelque chose que vous ne pouvez pas le faire de manière fiable avec une valeur booléenne true ou false, au moins sur un document de l'échelle.

Toucher les événements et les événements de la souris sont exclusifs. Si cela peut aider dans une certaine mesure d'effectuer différentes actions. Le problème est que les événements tactiles sont plus proches de la souris vers le haut/vers le bas/déplacer des événements, et aussi déclencher un événement de clic.

De votre question, vous dites que vous voulez avoir une info pour afficher l'aperçu. Au-delà de ce que je ne connais pas d'autres détails au sujet de votre interface. Je suis en supposant qu'avec l'absence de souris, vous voulez un robinet pour obtenir un aperçu, tout en un clic n'a une action différente en raison de la hover aperçu.

Si c'est le cas, vous pouvez prendre un peu paresseux approche de la détection:

Un événement onclick sera toujours précédée par un événement onmouseover avec une souris. Alors, notez que la souris est au-dessus de l'élément qui a été cliqué.

Vous pouvez le faire avec un document à l'échelle de l'événement onmousemove. Vous pouvez utiliser event.target pour enregistrer l'élément de la souris est résidant sur. Ensuite, à l'intérieur de votre événement onclick, vous pouvez vérifier pour voir si la souris est en fait plus de l'élément cliqué (ou un enfant de l'élément).

À partir de là, vous pouvez choisir soit de s'appuyer sur l'événement click pour les deux et prendre une A ou B de l'action en fonction du résultat. Le B d'action pourrait être rien de si certains appareils tactiles n'émettent pas d'un événement de clic (au lieu de cela vous aurait à s'appuyer sur ontouch* événements).

La meilleure idée à mon avis est le mousemove auditeur (actuellement la première réponse). Je crois que cette méthode doit être modifié un peu. Il est vrai que toucher les navigateurs basés sur émuler même de l'événement mousemove, comme vous pouvez le voir dans cet iOS discussion, donc on devrait être un peu prudent.

Ça a du sens tactile, les navigateurs ne peuvent émuler cet événement lorsque l'utilisateur appuie sur l'écran (le doigt de l'utilisateur est en panne). Cela signifie que nous devons ajouter un test lors de notre gestionnaire mousemove pour voir quel bouton de la souris est enfoncée (le cas échéant) au cours de l'événement. Si aucun bouton de la souris est enfoncé, on peut supposer une vraie souris est présente. Si un bouton de la souris est enfoncé, le test ne sont pas concluantes.

Alors, comment cela serait-il mis en œuvre? Cette question montre que la méthode la plus fiable pour examiner quel bouton de la souris est éteint au cours d'un événement mousemove est de les écouter pour les 3 événements dans le document de niveau: mousemove, mousedown et mouseup. Le haut et le bas ne mondial indicateur booléen. Le déménagement permettra de réaliser le test. Si vous avez un déménagement et le booléen est faux, on peut supposer une souris est présente. Voir la question exacte des exemples de code.

Un commentaire final.. Ce test n'est pas idéal, car il ne peut pas être effectuée dans les temps de chargement. Donc, je voudrais utiliser une amélioration progressive de la méthode comme suggéré précédemment. Par défaut, afficher une version qui ne prend pas en charge la souris spécifiques passez de l'interface. Si une souris est découvert, l'activation de ce mode en cours d'exécution en utilisant JS. Ce doit apparaître de la façon la plus transparente possible pour l'utilisateur.

Afin de soutenir les changements dans la configuration de l'utilisateur (c'est à dire de la souris a été déconnecté), vous pouvez périodiquement re-test. Bien que je crois qu'il vaudra mieux dans ce cas pour simplement informer l'utilisateur sur les 2 modes et permettent aux utilisateurs de basculer manuellement entre eux (un peu comme le mobile/desktop choix qui peut toujours être inversé).

Une solution simple en jQuery pour détecter l'usage de la souris, ce qui résout le problème où les appareils mobiles aussi trigger 'mousemove' événement. Il suffit d'ajouter un écouteur d'évènements touchstart pour supprimer l'événement mousemove de l'auditeur, de sorte qu'elle ne soit pas déclenchée sur la touche.

$('body').one('touchstart.test', function(e) {
  //Remove the mousemove listener for touch devices
  $('body').off('mousemove.test');
}).one('mousemove.test', function(e) {
  //MOUSE!
});

Bien sûr, le dispositif pourrait encore être tactile ET la souris, mais la ci-dessus sera la garantie d'une vraie souris a été utilisé.

J'ai rencontré le même problème, où une touche unique a également été enregistrée comme un clic.
Après j'ai lu les commentaires de haut voté réponses, je suis venu avec ma propre solution:

JS:

var body = document.getElementsByTagName('body')[0];
var mouseCount = 0;

//start in an undefined state 
//(i use this to blend in elements once we decide what input is used)
var interactionMode = 'undefined';


var registerMouse = function() {
  //count up mouseCount every time, the mousemove event is triggered
  mouseCount++;

  //but dont set it instantly. 
  //instead wait 20 miliseconds (seems to be a good value for multiple move actions), 
  //if another mousemove event accoures switch to mouse as interaction 
  setTimeout(function() {
    //a touch event triggers also exactly 1 mouse move event.
    //So only if mouseCount is higher than 1 we are really moving the cursor by mouse.
    if (mouseCount > 1) {
      body.removeEventListener('mousemove', registerMouse);
      body.removeEventListener('touchend', registerTouch);

      interactionMode = 'mouse';
      console.log('now mousing');
      listenTouch();
    }

    //set the counter to zero again
    mouseCount = 0;
  }, 20);
};

var registerTouch = function() {
  body.removeEventListener('mousemove', registerMouse);
  body.removeEventListener('touchend', registerTouch);

  interactionMode = 'touch';
  console.log('now touching');
  mouseCount = 0;

  listenMouse();
};

var listenMouse = function() {
  body.addEventListener("mousemove", registerMouse);
};
var listenTouch = function() {
  body.addEventListener("touchend", registerTouch);
};

listenMouse();
listenTouch();

//after one second without input, assume, that we are touching
//could be adjusted to several seconds or deleted
//without this, the interactionMode would stay 'undefined' until first mouse or touch event
setTimeout(function() {
  if (!body.classList.contains('mousing') || body.classList.contains('touching')) {
    registerTouch();
  }
}, 1000);

CSS:

/* fix, so that scrolling is possible */

html,
body {
  height: 110%;
}

HTML:

Mouse or touch me

Le seul problème que j'ai trouvé est que vous devez être en mesure de faire défiler, de détecter correctement un événement tactile. un seul onglet(touch) pourrait créer des problèmes.

Je recommanderais fortement à l'encontre de cette approche. Envisager l'écran tactile, ordinateur de bureau de taille des appareils, et vous avez un ensemble différent de problèmes à résoudre.

Veuillez vous rendre votre application utilisable sans souris (c'est à dire pas de hover aperçu).

Il est généralement une meilleure idée de détecter si la fonction mouseover est pris en charge plutôt que de les détecter l'OS/type de navigateur. Vous pouvez le faire simplement par ce qui suit:

if (element.mouseover) {
    //Supports the mouseover event
}

Assurez-vous que vous ne pas procédez de la manière suivante:

if (element.mouseover()) {
    //Supports the mouseover event
}

Ce dernier serait en fait l'appel à la méthode, plutôt que de vérifier son existence.

Vous pouvez en lire plus ici:
http://www.quirksmode.org/js/support.html