Solution encore améliorée
J'ai d'abord adopté l'approche de Rich Bradshaw , mais des problèmes ont commencé à apparaître. En exécutant e.preventDefault () sur l'événement 'touchstart' , la page ne défile plus et, ni l' appui long ne peut déclencher le menu d'options ni le zoom double-clic ne peut terminer l'exécution.
Une solution pourrait être de découvrir quel événement est appelé et juste e.preventDefault () dans le dernier, «touchend» . Puisque le ` ` touchmove '' de scroll vient avant `` touchend '', il reste comme par défaut, et le `` clic '' est également empêché car il vient après des mots dans la chaîne d'événements appliquée au mobile, comme ceci:
// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {
// If event is 'touchend' then...
if (e.type == 'touchend') {
// Ensuring we event prevent default in all major browsers
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
// Add class responsible for :hover effect
$(this).toggleClass('hover_effect');
});
Mais alors, lorsque le menu d'options apparaît, il ne déclenche plus le «touchend» responsable du basculement hors de la classe, et la prochaine fois que le comportement de survol sera l'inverse, totalement mélangé.
Une solution serait alors, encore une fois, de découvrir conditionnellement dans quel événement nous sommes, ou simplement d'en faire des séparés, et d'utiliser respectivement addClass () et removeClass () sur 'touchstart' et 'touchend' , en s'assurant qu'il commence et se termine toujours par respectivement ajouter et supprimer au lieu de décider conditionnellement. Pour finir, nous lierons également le rappel de suppression au type d'événement 'focusout' , en restant responsable de la suppression de la classe de survol de tout lien qui pourrait rester active et ne plus jamais être revisitée, comme ceci:
$('.static_parent').on('touchstart', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('touchend focusout', '.link', function (e) {
// Think double click zoom still fails here
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$(this).removeClass('hover_effect');
});
Attention: certains bugs se produisent encore dans les deux solutions précédentes et, pensez également (non testé), le zoom double-clic échoue toujours aussi.
Solution Javascript ordonnée et, espérons-le, sans bogue (pas :))
Maintenant , pour une deuxième approche, plus propre, plus ordonnée et réactive, en utilisant simplement javascript (pas de mélange entre la classe .hover et pseudo: hover) et à partir de laquelle vous pouvez appeler directement votre comportement ajax sur l' événement `` clic '' universel (mobile et bureau) , J'ai trouvé une question assez bien répondue à partir de laquelle j'ai finalement compris comment je pouvais mélanger des événements tactiles et souris ensemble sans que plusieurs rappels d'événements ne changent inévitablement les uns des autres dans la chaîne d'événements. Voici comment:
$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
$(this).removeClass('hover_effect');
// As it's the chain's last event we only prevent it from making HTTP request
if (e.type == 'click') {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
// Ajax behavior here!
}
});