oujood.com

Les événements de la souris: Événements liés à la souris

Un événement de la souris est déclenché lorsque l'utilisateur clique sur un élément, déplace le pointeur de la souris, etc. Voici quelques méthodes jQuery couramment utilisées pour gérer les événements de la souris.

chercher |

Événements de la souris dans jQuery

Cet article explique les différents événements de la souris qui se produisent en fonction de la position ou des actions de la souris sur un élément HTML particulier.

La méthode click()

La méthode jQuery click() attache une fonction de gestion d'événement aux éléments sélectionnés pour l'événement "click". La fonction attachée est exécutée lorsque l'utilisateur clique sur cet élément. L'exemple suivant permet de masquer les éléments <p> d'une page lorsqu'ils sont cliqués.

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exécution d'une fonction sur un événement de clic en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: beige;
    }
</style>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
</head>
<body>
    <p>Si tu cliques sur moi, je disparais.</p>
    <p>Si tu cliques sur moi, je disparais.</p>
</body>
</html>

Dans cet exemple nous avons utilisé une fonction qui fait disparaitre les paragraphe lorsqu'on clique dessus en se servont de la méthode slidup() pour en savoir plus sur cette méthode voir notre tutoriel :Les effets jQuery :Masquer, afficher, basculer, diapositive, estomper et animer.

Remarque : Le mot-clé this dans la fonction de gestion d'événement de jQuery est une référence à l'élément dans lequel l'événement est en train de se produire.

La méthode dblclick()

>La méthode jQuery dblclick() relie une fonction de gestion d'événement aux éléments sélectionnés pour l'événement "dblclick". La fonction liée est exécutée lorsque l'utilisateur double-clique sur cet élément. L'exemple suivant permet de masquer les éléments <p> après un double clic.

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exécution d'une fonction sur un événement de double-clic en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: beige;
    }
</style>
<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
</head>
<body>
    <p>Si tu Double-clique sur moi, je disparais.</p>
    <p>Si tu Double-clique sur moi, je disparais.</p>
</body>
</html>

La méthode hover()

La méthode jQuery hover() associe aux éléments sélectionnés une ou deux fonctions de gestion d'événements qui sont exécutées lorsque le pointeur de la souris entre et sort des éléments. La première fonction est exécutée lorsque l'utilisateur place le pointeur de la souris sur un élément, tandis que la deuxième fonction est exécutée lorsque l'utilisateur retire le pointeur de la souris de cet élément.

L'exemple suivant mettra en évidence

éléments lorsque vous placez le curseur dessus, la mise en évidence sera supprimée lorsque vous retirez le curseur.

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exécution d'une fonction sur un événement de survol en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #00f2f2;
    }
    p.lumiereVive{
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("lumiereVive");
    }, function(){
        $(this).removeClass("lumiereVive");
    });
});
</script>
</head>
<body>
    <p>Placez le pointeur de la souris sur moi.</p>
    <p>Placez le pointeur de la souris sur moi.</p>

</body>
</html>

Remarque : on peut considérer que la méthode hover() est une combinaison des méthodes jQuery mouseenter() et mouseleave().

jQuery événements : mouseenter et mouseleave

L'événement mouseenter se produit lorsque la souris est placée sur l'élément HTML et l'événement mouseleave se produit lorsque la souris est retirée de l'élément.

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exécution d'une fonction sur un événement de survol en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#key{width:200px}
</style>
</head>
<body>
	<p id="exemple">Texte d'Origine </p>


	<script>
		$("document").ready(function () {
			$("#exemple").mouseenter(enter);
			$("#exemple").mouseleave(leave);
			function enter() {
				$("#exemple").text("L'événement mouseenter a eu lieu, donc la souris est sur l'élément p");
				$("#exemple").css("background-color","yellow");
				$("#exemple").css("color","#000000");				
			}
			function leave() {
				$("#exemple").text("L'événement mouseleave s'est produit, donc la souris à quitté l'élément p");
					$("#exemple").css("background","red");
					$("#exemple").css("color","#ffffff");
			}
		});
	</script>
</body>
</html>

Dans l'exemple ci-dessus on chage le contenu de l'élément p est le css losque la souris est sur l'élément ou l'a quitté

Les événements MouseUp et MouseDown

Le mouseup et le mousedown nécessitent un clic de souris pour se produire. L’événement mouseDown se produit en appuyant sur le bouton (gauche ou droit) de la souris.
L’événement mouseUp quant à lui il se produit lorsqu’on relâche le bouton de la souris.
Donc un événement click de la souris produit toujours les deux événements

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exécution d'une fonction sur un événement click de la souris  en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#key{width:200px}
</style>
</head>
	<body>
		<p id="exemple">Text d'origine</p>
	</body>
		<script>
		$("document").ready(function()
		{
			$("#exemple").mouseup(relacher);
			$("#exemple").mousedown(appuyer);
			function relacher()
			{
				$("#exemple").text("L'événement mousedown s'est produit, donc la souris est sur l'élément p avec le bouton relaché");
				$("#exemple").css("background-color","yellow");
				$("#exemple").css("color","#000000");				
			}
			function appuyer()
			{
				$("#exemple").text("L'événement mouseup a eu lieu, la souris est sur l'élément p avec le bouton appuyé");
					$("#exemple").css("background","red");
					$("#exemple").css("color","#ffffff");
			}
		});
		</script>
</body>
</html>

les événements mouseover et mouseout en jQuery

Ces événements se produisent lorsque la souris est placée sur un élément HTML spécifique.

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exécution d'une fonction sur un événement de survol de lma souris en jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#key{width:200px}
</style>
</head>
<body>
	<p id="exemple">Texte d'Origine </p>


	<script>
		$("document").ready(function () {
			$("#exemple").mouseover(enter);
			$("#exemple").mouseout(leave);
			function enter() {
				$("#exemple").text("L'événement mouseover a eu lieu, donc la souris survole l'élément p");
				$("#exemple").css("background-color","yellow");
				$("#exemple").css("color","#000000");				
			}
			function leave() {
				$("#exemple").text("L'événement mouseout s'est produit, donc la souris quitte l'élément p");
					$("#exemple").css("background","red");
					$("#exemple").css("color","#ffffff");
			}
		});
	</script>
</body>
</html>

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web