Déclencher un clic artificiel avec jQuery

Mars 2013

En règle général, les événements proviennent d'une action de l'utilisateur, comme le clic sur un lien. Cet événement va provoquer l'exécution de tous les handler javascript attachés à l'élément cliqué, et au type d'événement généré : le clic. Après l'exécution du javascript, le navigateur va exécuter le comportement par défaut pour l'événement ; pour le clic sur un lien, le navigateur va charger la page ciblée par le lien (l'URL).

jQuery permet de déclencher un événement artificiel depuis le code javascript. La méthode générique pour faire ça s'appelle .trigger(type) qui prend en premier paramètre le type d'événement à générer, mais il existe aussi tout un tas de fonctions alias pour les principaux types d'événement : .click(), .change()... (exactement comme pour la fonction .bind).

Voici un petit exemple avec un lien, et un bouton "Trigger" qui permet de déclencher un clic virtuel sur ce lien :

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
	jQuery(function($){
		$('#lien1').click(function(e){
			alert('A bientôt !');
		});
		
		$('#trigger-test').click(function(e){
			$('#lien1').trigger('click'); // équivalent de  $('#lien1').click();
		});
	});
	</script>
</head>
<body>
	<a id="lien1" href="http://www.google.fr/">Lien</a>
	<button id="trigger-test">Trigger</button>
</body>
</html>

Si vous voulez en savoir plus c'est par ici : changer la couleur d'une cellule si la valeur est différente.

Un clic sur le bouton Trigger déclenche l'exécution de la fonction attachée au clic sur #lien1, c'est-à-dire l'affichage de l'alert.

Par contre le comportement par défaut, c'est-à-dire l'ouverture du lien, ne se produit pas. Malheureusement c'est impossible à faire, les navigateurs ne le permettent pas pour des raisons évidentes de sécurité (ça pourrait être utilisé pour faire du phishing par exemple).

Encore faim ? allez lire ça : montage photo chaotique !

Fil de lecture

0 commentaire