JS: différence entre touch et souris/clavier

[Stephane Deschamps]

Salut les jeunes,

Je suis en train de faire un truc qui doit réagir de la façon suivante :

DESKTOP (clavier + souris)
1. survol ou focus : afficher un truc
2. clic : aller quelque part

TOUCH (tablette)
1. premier tap : afficher un truc
2. deuxième tap : aller quelque part

Est-ce que vous avez l'expérience ou des pistes pour que je trouve un
script qui permet de faire ça, ou est-ce que c'est géré nativement par
les navigateurs des tablettes (qui convertiraient le focus en premier
tap et le clic en deuxième tap) ?

Tout piste est bonne à prendre, je bloggerai un résumé pour la communauté.

--
Cordialement,
Stéphane Deschamps
http://www.nota-bene.org/

[nicolas_froidure]

Hello,

Normalement, les périphériques s'adatent bien s'il n'y a que des
évènements souris, mais pas tjrs. Il faut détecter le type de
périphériques pour gérer les évènements en conséquence. J'ai
exactement ça dans ma toolbox ;).


// Detecting device specs
if((window.matchMedia&&window.matchMedia('(max-width:
650px)').matches))
{
this.screenType='small';
}
else
this.screenType='normal';
if(('ontouchstart' in window) || (window.DocumentTouch && document
instanceof DocumentTouch))
{
this.navType='touch';
}
else
this.navType='normal';
if(navigator.userAgent.match(/android|iphone|ipod|fennec|opera mobi/
i))
{
this.navType='touch';
this.screenType='small';
}
if(navigator.userAgent.match(/ipad/i))
{
this.navType='touch';
}

++

On 16 mai, 10:58, Stephane Deschamps <stephane.descha...@gmail.com>
wrote:

[aurelien masfrand]

Normalement l'événement hover est automatique remplacé par un click sur les tablettes.
Mais je sais pas si on peut s'appuyer dessus de façon général, est-ce un norme ou un standard, je sais pas.

Aurélien Masfrand

2012/5/16 nicolas_froidure <nicolas_...@elitwork.com>

--
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes Professionnels francophones du développement web.
Pour envoyer un message à ce groupe, adressez un e-mail à webd...@googlegroups.com.
Pour vous désabonner de ce groupe, envoyez un e-mail à l'adresse webdevfr+u...@googlegroups.com.
Pour plus d'options, consultez la page de ce groupe : http://groups.google.com/group/webdevfr?hl=fr

[Anthony Ricaud]

Que vois-je, du UA sniffing? Bouh.

Sinon, pseudo-code pour la dèche:
var tappedOnce = false

doc.addEventListener('click', handleTap)
doc.addEventListener('hover', displayBidule)

f handleTap() {
if (!nav.supportsTouch || tappedOnce) {
goTo()
return
}
tappedOnce = true
displayBidule()

[Olivier GENDRIN]

Le 16 mai 2012 11:08, aurelien masfrand <aurelien...@gmail.com> a écrit :
> Normalement l'événement hover est automatique remplacé par un click sur les
> tablettes.

Heureusement que non.

--
Olivier G.
http://identi.ca/lespacedunmatin
http://www.lespacedunmatin.info/blog/

[nicolas_froidure]

> Que vois-je, du UA sniffing? Bouh.

Malheureusement :

if(('ontouchstart' in window) || (window.DocumentTouch
&& document
instanceof DocumentTouch))

Marche sur peu de périphériques en pratique.

[Julien Wajsberg]

pas simple simple ton truc.

Sur tablette, "touchstart + touchend"  est converti en "click" après 200 à 400ms, hover est pas géré, focus non plus.
j'ai testé aussi du mousedown/mouseup/mouseover/mouseout et je me rappelle plus trop des résultats, mais ça résolvait pas ton problème.

-> http://chatillon.everlong.org/~flash/tests/touch/

Va falloir faire de la disjonction de cas, bon courage :p
Modernizr semble supporter la détection de touch:
cf http://modernizr.com/docs/#touch et http://modernizr.github.com/Modernizr/touch.html

2012/5/16 Stephane Deschamps <stephane....@gmail.com>

[Yves Van Goethem]

1/ Détecter la capacité du navigateur à gérer le touch

2/ Écrire une fonction qui gère le tout

3/ Binder les événements à celle-ci:

http://jsfiddle.net/mUrQu/1/

Bisous.

2012/5/16 Julien Wajsberg <fel...@gmail.com>

[Stephane Deschamps]

Resalut tous,

Le plus prometteur (et le plus simple en utilisant jQuery) semble être
de s'appuyer sur le genre de diagnostic que fait Modernizr :
https://github.com/Modernizr/Modernizr/issues/84#issuecomment-439490

Si l'un de ces tests :
('ontouchstart' in window);

and

try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}

and

'createTouch' in document

and

(typeof TouchEvent != "undefined")

and

(typeof Touch == "object")

... renvoie vrai, alors on a affaire à du touch.

Je vais tenter ça, et je documenterai tout ce que vous m'avez montré
et ce que j'ai fait au final.

YVG : le jsFiddle c'est toi qui l'as écrit ? (pour que je crédite proprement)

Merci les gens :)
-- stef

[Yves Van Goethem]

Oui, mais ce n'est pas nécessaire de me créditer : WTFPL :)

2012/5/16 Stephane Deschamps <stephane....@gmail.com>

[Stephane Deschamps]

Au passage je me suis planté dans le comportement : j'ai oublié de
dire que le deuxième clic se faisait forcément sur un lien enfant de
l'élément qui s'est ouvert.

Avec l'aide de tous vos neurones je vais faire un truc bien, je vous
dirai quand c'est en ligne ;)