Link-hover auf Touch-Geräten

[xzap]

Hallo,

ich möchte, dass beim Hovern eines Linkes ein div eingeblendet wird. Auf Touch-Geräten soll beim 1. tap das div eingeblendet werden, und erst beim 2. tap soll die verlinkte Seite geladen werden. Der Link sollte auch ohne JavaScript noch klickbar sein.

Auf dem Desktop funktioniert es, auch mit abgeschalteten JS (dann ist die Info-Box halt immer im Bild, aber der Link ist da).

Auf Touchgeräten leider nicht, er lädt schon beim 1. Tap die neue Seite. Nach meinem Verständnis müsste mit folgendem Code beim 1. Tap aber eig. erst die Info-Box (auf der der Link liegt) eingeblendet werden.

<img 
  src="portfolio/previews/thirteen_prev2.png" 
  alt="">
<div class="proj-info">
  <a href="portfolio/thirteen.html">
    <div>extra infos.....</div>
  </a>
</div>

JS:

$('.proj-info').fadeOut(0);
	var fadingTime = 200;
	
	$('.preview').hover(
	function() {
		var info = $(this).find('.proj-info');
		info.stop().fadeIn(fadingTime);
	}, 
	function() {
		var info = $(this).find('.proj-info');
		info.stop().fadeOut(fadingTime);
	});
		
	/* touchevent */
	$('.preview').on("tap", function(){
		var info = $(this).find('.proj-info');
		info.stop().fadeIn(fadingTime);
	});

 

[SteelWheel]

Für mein Verständnis müsstest Du allen Links unterhalb von proj-info ein preventDefault() verpassen, damit diese nicht verfrüht ausgeführt (1. Klick) werden. Dann gilt es, beim zweiten Klick/Tab via JavaScript das "neue Verhalten" einzubauen - stellt eigentlich kein Problem dar, wenn Du die jeweilige Klick-Aktion in einer simplen Variablen mitschreibst und eben nur prüfst, der wievielte Klick das jetzt war. Klick 1 simuliert dann Hover, Klick 2 feuert das href ab ...

Ist JavaScript dann deaktiviert, funktioniert der Link wieder wie gewohnt (beim 1. Klick).