Gestion des événements Hover sur un écran tactile

Un site web, j'ai conçu utilise une nav menu qui affiche les sous-menus sur :hover. Le site initial n'a pas utilisé tout responsive design: elle vise seulement l'environnement de bureau. Je suis maintenant en responsive-techniques de conception pour cible les appareils mobiles et les tablettes, qui sont nombreuses à toucher plutôt que de la souris en fonction.

Le gros problème, j'ai été confronté (et que beaucoup d'autres personnes semblent avoir également face) a été en vol stationnaire à base de nav menu: il fonctionne très bien dans une de la souris de l'environnement, mais sur des périphériques tactiles, il n'existe pas de moyen fiable pour déclencher le décollage, faisant de la page est difficile à utiliser.

L'objectif est: est-ce

  1. Lorsqu'un menu est a plané par une souris, afficher le sous-menu.
  2. Lorsqu'un menu est cliqué avec la souris, ouvrez le lien de la balise d'ancrage.
  3. La première fois, un menu est cliqué par le toucher, afficher le sous-menu.
  4. La deuxième fois qu'un menu est cliqué par le toucher, ouvrir le lien de la balise d'ancrage.
  5. Fonctionnalité de commutateur de façon transparente pour les tablettes qui ont également des souris les périphériques connectés.

Mon équipe n'est pas prêt à sacrifier l'effet hover sur la souris sur des machines. Ils l'aiment et ne veulent pas faire les menus cliquez basé sur tous les appareils. Je suis d'accord avec cela.

Après recherche sur le net, je ne pouvais pas trouver tout seul la solution à mon problème. J'ai mis un peu d'eux ensemble et a développé quelque chose qui a bien testé sur Android, avoir exactement les fonctionnalités que je voulais. Est-il quelque chose qui peut être amélioré et/ou voyez-vous des problèmes avec cette approche?

jQuery(document).ready(function() {
    var touched=false;
    jQuery(".nav").on('touchstart', 'li .has_children', function (e) {  touched=true; });
    jQuery("html").on('mousemove', function (e) { touched=false; });

    jQuery("html").on('click', updatePreviousTouched );

    jQuery(".nav").on('click', 'li .has_children', function (e) {
        updatePreviousTouched(e);
        if( touched ) { 
            if (jQuery(this).data('clicked_once')) {
                jQuery(this).data('clicked_once', false);
                return true;
            } else {
                e.preventDefault();
                jQuery(this).trigger("mouseenter"); 
                jQuery(this).data('clicked_once', true);

            }
        }
        touched=false;
    }); 

    var previous_touched;
    function updatePreviousTouched(e) {
        if( typeof previous_touched != 'undefined' && previous_touched != null && !previous_touched.is( jQuery(e.target) ) ) {
            previous_touched.data('clicked_once', false);
        }
        previous_touched=jQuery(e.target);
    }
}

Voici un jfiddle: http://jsfiddle.net/5FfCF/1/

Si cette solution peut être améliorée, veuillez donner des suggestions. Si vous trouvez que cela ne fonctionne pas pour vous, s'il vous plaît laissez-moi savoir que trop. Je poste ici pour essayer d'obtenir des suggestions d'amélioration et de publier l'idée que les autres puissent en bénéficier.

Voici les résultats de mes tests:

  1. Windows 7 sur les principaux 5 navigateurs: les œuvres.
  2. Tablette Android sur le navigateur par défaut: les œuvres.
  3. Windows 7 ordinateur portable avec écran tactile sur IE et Chrome: Tri de travaux. La machine exécute la version de bureau de deux navigateurs, de sorte qu'il n'est pas le déclenchement de la "évènements touchstart" de l'événement. Quelque part entre l'écran tactile et le navigateur, quelque chose est en train de convertir le toucher dans les événements de la souris. Cependant, depuis la souris est un non-amovible le cadre de ce dispositif, je n'ai pas considérer cela comme un échec. Je voudrais si cela a fonctionné comme une tablette, mais il ne semble pas être la technologie encore disponible.
  4. iOS iPad: Cela a fonctionné comme souhaité avant j'ai écrit le javascript ci-dessus. Il semble que ios fait partie de cette hover/cliquez sur la magie pour nous derrière les coulisses. J'ai un membre de l'équipe de la vérification pour voir si mon javascript cassé la fonctionnalité d'iOS, j'éditerai ce post une fois que je reçois une réponse.

Autres notes:

  1. Ce n'est que le menu de l'ordinateur de bureau et tablette site. Il y a un différent, cliquez sur menu pour le site mobile. Je ne recommande pas d'utiliser cette solution pour un téléphone-appareil de la taille.

source d'informationauteur JoshuaD