Tap et double-tap sur mobile (Hammer.js)

Bonjour à tous,

J'ai créé un site sur lequel se trouve une carte avec une icone qui, au survol de celle-ci, indique le titre du lien rattaché à cette icone. En cliquant sur l'icone on accède à une nouvelle page (dans cet exemple, j'ai mis yahoo.fr, mais c'est totalement random).

Voici le code HTML :

			<div class="carte">
				<div class="responsive">
					<img src="img/carte.jpg" class="carte-monde" alt="carte monde en dessin"/>
					<div id="bijagos">
						<a href="www.yahoo.fr" class="lien-bijagos"><img src="img/icone-bijagos.png" id="icone-bijagos" alt="icone placée sur les Bijagos"/></a>
						<p class="texte-bijagos">La géologie des Bijagos</p>
					</div>
				</div>
			</div>

Et le CSS :

#icone-bijagos:hover {
    width:2.2%;
}

p.texte-bijagos {
    position:absolute;
    left:43.5%;
    top:37%;
    opacity:0;
    color: #ff9600;
    font-weight: bold;
    text-shadow: 2px 0 0 white, 0 2px 0 white, 0 -2px 0 white, -2px 0 0 white, 2px 2px 0 white, 2px -2px 0 white, -2px 2px 0 white, -2px -2px 0 white;
}

#bijagos:hover p.texte-bijagos{
    transition-property: opacity;
    transition-duration: 0.2s;
    transition-timing-function:linear;
    opacity: 1;
}

Sur mobile, j'aimerais qu'un "tap" révèle le texte, et qu'un "double-tap" active le lien. On m'a recommandé d'utiliser Hammer.js, mais je n'y connais rien en Javascript.

Voilà ce que j'ai péniblement tenter d'assembler comme code, que j'ai placé ensuite tout en bas de mon head dans le html.

    <script type="text/javascript">
    	var hammer = Hammer($("#icone-bijagos"), {
    		transform_always_block: true,
    		tap_always: false,
    		drag_min_distance: 0
    	});
    	hammer.on("touch tap doubletap", function(event) {
    		iconeAction(event);
    	});
    	var $icone-bijagos = $("#icone-bijagos");
    	var transform = "";
    	var boxShadow = "";
    	var scale = lastScale = 1,
    	positionX = positionY = lastPositionX = lastPositionY = 0,
    	pushed = false,
    	square = false;

    	function iconeAction(event) {
    		switch(event.type) {
    		// au touch (quel que soit l'événement), on initialise les variables
    		case "touch" :
    		lastScale = scale;
			lastPositionX = positionX;
			lastPositionY = positionY;
			break;

			case "tap" :
			txt = "Tap : apparition du texte et desactivation du lien";
			$("p.texte-bijagos").css({'transition-property':'opacity', 'transition-duration':'0.2s', 'transition-timing-function':'linear', 'opacity':'1'});
			$("a.lien-bijagos").css({'pointer-events':'none', 'cursor':'default'});
			break;

			case "doubletap" :
			txt = "DoubleTap : activation du lien";
			$("p.texte-bijagos").css({'opacity':'1'});
			break;}
		}
	</script>

Si quelqu'un a des observations à y apporter, je lui serais très reconnaissante ^^"
Modifié par moussolene (09 Apr 2020 - 14:45)