Menu différencié sur un écran réagissant au toucher ou au clic

Bonjour, à tous.

Je voudrais réaliser un menu qui gère la différence entre le toucher (écran tactile), le survol et le clic. Après différentes recherches, dont celle sur le support de Mozilla, il apparait qu’il faut utiliser l’évènement TouchEvent. Sauf que je ne maitrise pas du tout la gestion des évènements. J’ai aussi cherché des scripts tout faits, mais ils sont lourds.

Voici ce que j’aimerais obtenir.
menu parent sans enfant : le toucher et le clic amènent sur la page du lien parent-sans-enfant.php
Menu parent avec enfant : le toucher ne fait qu’ouvrir le sous-menu. Le survol à la souris ouvre le sous-menu, le clic ouvre la page parente parent-avec-enfant.php.
Menu enfant : le toucher et le clic amènent sur la page du lien enfant-1.php, ou enfant-2.php selon les cas.

Il s’agit en fait de différencier le menu de premier niveau comme ceci :

<menu>
	<nav>
		<ul>
			<li>
				<a href="parent-sans-enfant.php">Menu sans enfant</a>
			</li>
			<li>
				<span class="clic">
					<a href="parent-avec-enfant.php">Menu parent avec liens actif</a>
				</span>
				<span class="toucher">
					Menu parent sans lien
				</span>
				<ul>
					<li>
						<a href="enfant-1.php">Menu enfant 1</a>
					</li>
					<li>
						<a href="enfant-2.php">Menu enfant 2</a>
					</li>
				</ul>
			</li>
		<ul>
	</nav>
</menu>

Comment procéder ? Merci pour vos explications.
Modifié par Pyanepsion (16 Nov 2015 - 09:41)

Bonjour,

Histoire de ne pas réinventer la roue, je te dirais bien d'utiliser un plugin tout fait pour ta détection, type hammerjs

Bonjour, SolidSnake.

J’ai bien peur que ce fichier en fasse beaucoup trop. Je veux uniquement faire ce que j’ai indiqué ci-dessus.

Pas d’idée ?