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
- Lorsqu'un menu est a plané par une souris, afficher le sous-menu.
- Lorsqu'un menu est cliqué avec la souris, ouvrez le lien de la balise d'ancrage.
- La première fois, un menu est cliqué par le toucher, afficher le sous-menu.
- La deuxième fois qu'un menu est cliqué par le toucher, ouvrir le lien de la balise d'ancrage.
- 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:
- Windows 7 sur les principaux 5 navigateurs: les œuvres.
- Tablette Android sur le navigateur par défaut: les œuvres.
- 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.
- 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:
- 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
Vous devez vous connecter pour publier un commentaire.
Piddle Diddle Violon 🙂
Violon Intégré Démo (à utiliser avec le téléphone pour la plus facile d'accès)
Avant de lire ce mur de texte, consultez le violon et assurez-vous que c'est ce que vous cherchez. Test sur un téléphone aussi (je l'ai testé sur mon Android et pas eu de problèmes).
Si vous avez un tout autre ensemble de code pour les téléphones mobiles, alors vous n'avez rien à vous soucier vraiment. L'adaptation au toucher vs passez événement est particulièrement difficile sur les appareils iOS. Mais j'ai été en mesure de surmonter ce par la capture d'un éventail d'événements de souris qui s'est traduit à un événement tactile.
Pour votre cas particulier, puisque vous voulez que ce soit si différent entre les trois, je vous conseille d'exécuter un début de script pour obtenir la taille de l'écran et si c'est moins de
### px x ### px
ajouter une classe appeléehandheld
oumobile
ou n'importe quoi d'body
. Maintenant, tout ce que vous avez à faire est d'attribuer latouch
capture de code à$('.mobile .nav')
et ont une feuille de code de l'affectation de lahover
événement pour Pc.Pour les tablettes, vous aurez à décider ce qui est le plus important pour vous - la possibilité de cliquer et naviguer à l'aide de l'option de menu racine pour chaque menu, ou seulement de permettre un clic sur le sous-menu (ce qui permettrait d'éliminer la nécessité d'ajouter la
.mobile
classe debody
).Voici un code que vous devez être en mesure d'utiliser à la fois mobile et de bureau.
jQuery:
Normalement je n'ai pas copier tout le code HTML comme je suis sur le point de faire, mais dans ce cas particulier, vous aurez besoin de prendre exactement comme je l'ai ici pour éviter le
inline-block
blanc-espace de pépin. Comparer mon violon d'origine et de voir combien il est plus facile de pointer/cliquer sur chaque lien.HTML:
Assez sûr que je n'ai même pas toucher le CSS donc je vais laisser ça en coulisse pour l'instant. J'espère que cela vous aide sur votre chemin.