Informatique


La souris (PointerEvent)

Aller à

Les événements de la souris Les propriétés de la souris
 

Les événements de la souris

Les méthodes permettant de récupérer les événement de la souris appartiennent à l'objet PointerEvent.
MDN ou W3School

Les événements de la souris:

  • click
  • dblclick
  • mousemove
  • mousedown
  • mouseup
  • mouseenter
  • mouseleave
  • mouseout
  • mouseover

Événement click
Démo
<head>
<meta charset=utf-8>
<style>
div {
	border:1px solid red;
	height:50px;
	width:50%;
	margin-left:50px;
}
</style>
</head>
<body>
<h1>L'événement click de l'objet PointerEvent</h1>
<div id="brol">Clique pupuce, ici, dans la division...</div>
<p id="demo"></p>
<script>
var madiv=document.getElementById("brol");
madiv.addEventListener("click",effet)
function effet(e) {
  document.getElementById("demo").innerHTML = "Tu as cliqué pupuce!";
}
</script>
</body>
Événement dblclick
Démo
<head>
<meta charset=utf-8>
<style>
div {
	border:1px solid red;
	height:50px;
	width:50%;
	margin-left:50px;
}
</style>
</head>
<body>
<h1>L'événement dblclick de l'objet PointerEvent</h1>
<div id="brol">Double-clique pupuce, ici, dans la division...</div>
<p id="demo"></p>
<script>
var madiv=document.getElementById("brol");
madiv.addEventListener("dblclick",effet)
function effet(e) {
  document.getElementById("demo").innerHTML = "Tu as double-cliqué pupuce!";
}
</script>
</body>
Événement mousemove
Démo
<head>
<meta charset=utf-8>
<style>
div {
	border:1px solid red;
	height:50px;
	width:50%;
	margin-left:50px;
}
</style></head>
<body>
<h1>L'événement mousemove de l'objet PointerEvent</h1>
<div id="brol">Bouge la souris pupuce, ici, dans la division...</div>

<p id="demo"></p>

<script>
var madiv=document.getElementById("brol");
madiv.addEventListener("mousemove",effet)
function effet(e) {
  document.getElementById("demo").innerHTML=e.clientX + " , "+e.clientY ;
}
</script>

</body>
Événements mousedown et mouseup
Démo
<head>
<meta charset=utf-8>
<style>
div {
	border:1px solid red;
	height:50px;
	width:50%;
	margin-left:50px;
}
</style></head>
<body>
<h1>Les événements mousedown et mouseup de l'objet PointerEvent</h1>
<div id="brol">Enfonce et relache le bouton gauche pupuce, ici, dans la division...</div>
<p id="demo"></p>
<script>
var madiv=document.getElementById("brol");
madiv.addEventListener("mousedown",effet1)
madiv.addEventListener("mouseup",effet2)
function effet1(e) {
  this.style.background = "red";
}
function effet2(e) {
  this.style.background = "green";
}
</script>
</body>
Événements mouseenter et mouseleave
Démo
<head>
<meta charset=utf-8>
<style>
div {
	border:1px solid red;
	height:50px;
	width:50%;
	margin-left:50px;
}
</style></head>
<body>
<h1>Les événements mouseenter et mouseleave de l'objet PointerEvent</h1>
<div id="brol">Entre et sors pupuce, ici, dans/de la division...</div>

<p id="demo"></p>

<script>
var madiv=document.getElementById("brol");
madiv.addEventListener("mouseenter",effet1)
madiv.addEventListener("mouseleave",effet2)
function effet1(e) {
  document.getElementById("demo").innerHTML = "La souris est entrée pupuce!";
}
function effet2(e) {
  document.getElementById("demo").innerHTML = "La souris est sortie pupuce!";
}
</script>

</body>
Événements mouseover et mouseout
Démo
<head>
<meta charset=utf-8>
<style>
div {
	border:1px solid red;
	height:50px;
	width:50%;
	margin-left:50px;
}
</style></head>
<body>
<h1>Les événement mouseover et mouseout de l'objet PointerEvent</h1>
<div id="brol">Survole et sors pupuce, ici, dans/de la division...</div>

<p id="demo"></p>

<script>
var madiv=document.getElementById("brol");
madiv.addEventListener("mouseover",effet1)
madiv.addEventListener("mouseout",effet2)
function effet1(e) {
  this.style.background = "red";
}
function effet2(e) {
  this.style.background = "green";
}
</script>

</body>

Les propriétés de la souris

Les propriétés de la souris appartiennent à l'objet PointerEvent qui hérite de l'objet Event.
MDN ou W3School

Récupérer la position de la souris par rapport à la fenêtre.

On utilise les propriétés clientX et clientY de l'objet PointerEvent. Ces propriétés renvoient les coordonnées horizontales et verticales du pointeur de la souris par rapport à la fenêtre lorsque l'événement de la souris a été déclenché.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		#position {width:180px;height:40px;background:yellow}
		#mydiv {width:300px;height:100px;background:red;margin-left:100px;}
	</style>
</head>

<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=mydiv></div>
	<div id=position></div>
	<script>
	var posi=document.querySelector("#position");
	var unediv=document.querySelector("#mydiv");
	unediv.addEventListener("mousemove",function(e){
		posi.innerHTML="Position X: "+e.clientX+" px<br>Position Y: "+e.clientY+" px";
		
	});
	
	</script>
</body>

Si on veut savoir la position de la souris sur l'ensemble du document, on applique le gestionnaire sur document.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		#position {width:180px;height:40px;background:yellow}
	</style>
</head>
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=position></div>
	<script>
	var posi=document.querySelector("#position");
	document.addEventListener("mousemove",function(e){
		posi.innerHTML="Position X: "+e.clientX+" px<br>Position Y: "+e.clientY+" px";
		});
		</script>
</body>

Plutôt que d'écrire document.addEventListener() on aurait pu écrire document.querySelector("html").addEventListener() ou encore document.getElementsByTagName("html")[0].addEventListener().
Noter que pour la dernière solution ci-dessus le [0] est indispensable car le méthode renvoie un tableau, même si un seul résultat est renvoyé!

Le déplacement de la souris

On utilise les propriétés offsetX et offsetY de l'objet PointerEvent pour récupérer le déplacement horizontal ou/et vertical de la souris par rapport à l'élément sélectionné.

Démo
<head>
<meta charset=utf-8>
<style>
div {
	border:1px solid red;
	height:50px;
	width:200px;
	margin-left:50px;
}
</style></head>
<body>
<h1>La propeiété offsetX de l'objet PointerEvent</h1>
<div id="brol">Clique mon biquet!</div>
<p>Et voilà l'offset selon X,Y:<span id="demo"></span></p>
<script>
var madiv=document.getElementById("brol");
madiv.addEventListener("click",deplacement)
function deplacement(e) {
  var x = e.offsetX;
  var y = e.offsetY;
  document.getElementById("demo").innerHTML = x + ","+y;
}
</script>

</body>
Le bouton cliqué de la souris

On utilise la propriété button de l'objet PointerEvent, celle-ci renvoie un entier: 0, 1 ou 2.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
	
	</style>
</head>

<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=util></div>
	<button id=mb>Clic!</button>
	<script>
	var util=document.querySelector("#util");
	var monbouton=document.querySelector("#mb");
	//console.log(monbouton);
	monbouton.addEventListener("mousedown",quelbouton);
	function quelbouton(e){
		if(e.button==0){
			util.innerHTML="Un beau clic gauche...";
		}
		else if(e.button==1){
			util.innerHTML="Un beau clic du milieu...";
		}
		else if(e.button==2){
			util.innerHTML="Un beau clic du droit...";
		}else {
			util.innerHTML="Oups...";
		}
	}
	</script>
</body>
Tester si ctrl, shift ou alt sont enfoncées?

On va utiliser un événement de la souris et savoir si au moment de l'événement de la souris une des trois touche est enfoncées.
On utilisera les propriétés ctrlKey, shiftKey et altKey.
Ces propriétés renvoient true ou false.

Démo
 <h1 id=maintitre>Cliquons en pressant ou en ne pressant pas la touche alt...</h1>
 <div id=res></div>
 <div id=res1></div>
 <div id=res2></div>
 <script>
 var d1=document.getElementsByTagName("html")[0];
 d1.addEventListener("click",reaction);
 function reaction(e){
	resu=document.querySelectorAll("div");
	resu[0].textContent="La touche alt est pressée: "+e.altKey;
	resu[1].textContent="La touche shift est pressée: "+e.shiftKey;
	resu[2].textContent="La touche ctr est pressée: "+e.ctrlKey;
 }
 </script>