Sources: Solving The Double Tap Issue on iOS Devices (fonctionne) et The Annoying Mobile Double-Tap Link Issue et Demo (pas testé, plus propre mais plus chiant à mettre en place si pas prévu en amont du développement du projet).
En javaScript (jQuery)
ATTENTION: votre lien doit évidemment être présent dans le DOM au moment où vous ce code est exécuté. Sinon, prévoir une détection.
|
1 2 3 4 5 |
$("a").on("click touchend", function(e) { var el = $(this); var link = el.attr("href"); window.location = link; }); |
Si l’utilisateur doit pouvoir scroller dans la page au touch sur un lien
Si l’utilisateur doit pouvoir scroller, il ne faut pas que le touch sur un lien déclenche ce dernier!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var ___SCROLL_TOP_LAST___ = 0; $(".autocomplete-item").on("touchstart", function() { ___SCROLL_TOP_LAST___ = $('body').scrollTop(); console.log('touchstart: '+___SCROLL_TOP_LAST___); }); $(".autocomplete-item").on("touchend", function() { console.log('touchend: '+___SCROLL_TOP_LAST___); var el = $(this); var link = el.attr("href"); if($('body').scrollTop() === ___SCROLL_TOP_LAST___) { window.location = link; } }); |
En CSS
cf. article de Chris Coyier sur CSS Tricks…