Accueil Compétences Patterns Page Web Jquery Gestion du click / onclick en javascript / jquery

Gestion du click / onclick en javascript / jquery

Clique:
16432

Réponse

Pour gérer le click sur un lien appelant une fonction javascript/jquery, il y a beaucoup de possibilité de codages. 
Lors du développement de ma calculatrice javascript, j'ai testé 3 méthodes dont les performances diffèrent en terme de réactivités...
Voici une présentation de celle-ci

Première méthode : le lien par href

1
<a href='javascript:mafonction();'>cliquer ici</a>

C'est la méthode la plus lente avec un effet sur le lien (si celui-ci prend une apparence de bouton) d'autre part elle n'est pas forcément supporté par Firefox...

Deuxième méthode : on passe par onclick

1
<a href='#' onclick='mafonction();'>cliquer ici</a>

Cette méthode fonctionne sur firefox et s'active plus rapidement mais à un soucis : elle fait revenir au début de l'écran à cause du href=#, sur un écran de smartphone ce n'est pas grave mais sur une page classique c'est génant...

Ses deux précédentes méthodes n'utilise pas jquery, c'est du pur javascript, mais si vous souhaitez avoir encore plus de réactivité, il va falloir passer du coté lumineux de ce Framework ;-)

Troisième méthode : le click géré par jquery

1
2
3
4
5
6
7
<a href='#' id='monLien'>Cliquer ici</a>
<script>
$('#monLien').live("click", function() {
	mafonction();
	return false;
});
</script>

C'est la méthode qui nécessite le plus de ligne de code, mais c'est pourtant la plus rapide.


Quand je parle d'une différence de vitesse, il est fort probable que sur un navigateur internet de pc vous ne voyez aucune différence entre ses 3 méthodes.
Pourtant, sur un smartphone ou une tablette, on perçoit clairement une différence, en particulier si votre interface vous oblige à appuyer rapidement sur plusieurs boutons...