onClick universel sur mobile et PC

**silency** · 05/03/2021, 09h28

Bonjour
Je sais que ce sujet a déjà été abordé à plusieurs endroits mais jamais "complètement" et il y a de tout, j'aimerai simplement savoir, en 2021, avec les principaux navigateurs web ET mobile, qu'elle est le meilleur moyen de faire un onclick ?

1) Binder l'objet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#truc').click(function() { });

2) Binder le body en reliant l'objet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('body').on('click', '#truc', function() { });

3) Binder l'objet en lui attribuant des trucs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#truc').bind('touchstart tap click', function(){ });

4) Binder le href direct

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" title="La La La" id="truc" onClick="do();">test</a>

Sachant que, sur mobile j'ai l'impression que le touchstart ou tap parfois se déclenche deux fois ou ne se déclenche pas (notamment iOS).

Quelle est la meilleure méthode et la plus universelle ?

Merci par avance !

**jreaux62** · 07/09/2021, 17h29

Bonjour,

Déjà, un peu de lecture de la doc :

bind()

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on()

.on()

Ensuite, ça peut dépendre du contexte.

1) $('#truc').click(function() { }); peut aussi s'écrire : $('#truc').on('click', function() { });.
2) $('body').on('click', '#truc', function() { }); : c'est de la "délégation".
Important surtout si l'élément (noeud) '#truc' n'est pas présent dans le DOM au chargement de la page (s'il est créé dynamiquement, via Ajax ou autre).
l'intérête ici, c'est que la balise <body> est forcément déjà dans le DOM .
3) on oublie (cf ci-dessus)
4) si vraiment on ne peut pas faire autrement. Sinon, à éviter.

onClick universel sur mobile et PC

jQuery

Vue hybride

Discussions similaires

Partager

Partager