Touchstart ne fonctionne pas
Bonjour à vous :)
Je suis en train de développer un petit site pour partager des documents entre les membres d'un groupe. Tout fonctionne bien puisque je me débrouille relativement bien en php.
Par contre en ce qui concerne le design, c'est une autre chose. J'ai un menu avec un bouton pour l'afficher. Sur un ordinateur c'est très joli puisque j'ai un :hover dans mon css pour le faire apparaître. Mais c'est sur mobiles que cela se gate :( . Je sais comme vous que :hover n'est pas une solution sur les mobiles puisqu'en fonction du support, ils réagissent différement (autant iphone/ipad et android je n'ai pas de soucis, ils assimilent un touché au hover, mais avec un BlackBerry 10 ça ne marche pas, et je n'ai pas testé windows phone encore..)
J'ai décidé d'entrer dans ce monde obscur pour moi qu'est le javascript, c'était du charabia pour moi, maintenant ça l'est un petit peu moins mais quand même :mrgreen: alors pour me faciliter "un peu" la tache, j'ai utilisé la librairie jquery..
Je suis donc sorti avec ce code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
//Ici on ajoute .active au clic/touché sur les menus
$(function() {
$(".todrop1").bind(clickHandler, function(e) {
$(this).addClass("active");
e.stopPropagation();
});
$(".todrop2").bind(clickHandler, function(e) {
$(this).addClass("active");
e.stopPropagation();
});
});
// Ici on supprime le .avtive des menus au clic/touché ailleurs
$(document).bind(clickHandler, function(e) {
$(".active").removeClass("active");
}); |
Sur PC c'est impeccable, cliquer sur .todrop1 ou 2 affiche bien le menu et cliquer ailleurs sur le document fait bien disparaître le menu (.active affiche le menu comme le :hover). Mais sur le Blackberry ça ne marche toujours pas. Et inutile de dire que ios/android, le :hover fait très bien son boulot. Je sais que l'erreur vient de moi comme le BB gère correctement JS, mais je ne vois pas où, si quelqu'un pourrait m'expliquer :/
