oujood.com

Comment utiliser la propriété CSS pointer-events pour contrôler les événements de souris sur les éléments HTML

Découvrez comment contrôler le comportement des événements de souris sur les éléments HTML avec la propriété CSS pointer-events. Ce tutoriel vous explique tout ce que vous devez savoir pour l'utiliser efficacement.

chercher |

Définition de la propriété CSS pointer-events

La propriété CSS pointer-events permet de contrôler le comportement des événements de souris (clic, survol, etc.) sur les éléments HTML.

Syntaxe générale de la propriété pointer-events CSS

La syntaxe générale de la propriété pointer-events est la suivante :

selector {
  pointer-events: value;
}
Valeurs par défautauto
Inherited: oui
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.pointerEvents="none"

Valeurs possibles de la propriété pointer-events CSS

Les valeurs possibles pour la propriété pointer-events sont les suivantes :

  • auto : le comportement par défaut, les événements de souris sont pris en compte sur l'élément et ses descendants.
  • none : les événements de souris sont ignorés sur l'élément et ses descendants.
  • visiblePainted : les événements de souris sont pris en compte sur l'élément, mais pas sur ses descendants.
  • visibleFill : les événements de souris sont pris en compte sur l'élément si le fond est visible, mais pas sur ses descendants.
  • visibleStroke : les événements de souris sont pris en compte sur l'élément si le contour est visible, mais pas sur ses descendants.
  • all : les événements de souris sont pris en compte sur l'élément et ses descendants, même si ceux-ci ont une propriété pointer-events: none.
  • inherit : la valeur est héritée de l'élément parent.

Exemples pratiques d'utilisation de la propriété pointer-events CSS

Voici quelques exemples pratiques d'utilisation de la propriété pointer-events :

Désactiver les événements de souris sur un élément

Exemple :       Copier le code


	<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS pointer-events</title>
<style>
.box {
			width: 200px;
			height: 200px;
			background-color: #f1c40f;
			border: 1px solid #e67e22;
			padding: 20px;
			text-align: center;
			font-size: 24px;
			margin: 50px;
			cursor: pointer;
		}
		.disabled {
			pointer-events: none;
			background-color: #bdc3c7;
			border: 1px solid #7f8c8d;
			cursor: default;
		}
</style>
</head>
<body>

<h1>La propriété pointer-events css</h1>
<div class="box disabled">Cliquez-moi !</div>

</body>
</html>

Activer les événements de souris sur un élément malgré la présence d'un élément devant lui

Exemple :       Copier le code


	<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS pointer-events</title>
<style>
.box {
		width: 200px;
		height: 200px;
		background-color: #f1c40f;
		border: 1px solid #e67e22;
		padding: 20px;
		text-align: center;
		font-size: 24px;
		margin: 50px;
		cursor: pointer;
	}
	.disabled {
		pointer-events: none;
		background-color: #bdc3c7;
		border: 1px solid #7f8c8d;
		cursor: default;
	}
</style>
</head>
<body>

<h1>La propriété pointer-events css</h1>
<div style="position: relative;">
	<div class="box">Cliquez-moi !</div>
	<div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color:# 000;"></div>
</div>

</body>
</html>

Activer les événements de souris sur un élément sous un élément transparent

Exemple :       Copier le code


	<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>La propriété CSS pointer-events</title>
<style>
.box {
		width: 400px;
		height: auto;
		background-color: #f1c40f;
		border: 1px solid #e67e22;
		padding: 20px;
		text-align: center;
		font-size: 24px;
		margin: 50px;
		cursor: pointer;
	}
	.disabled {
		pointer-events: none;
		background-color: #bdc3c7;
		border: 1px solid #7f8c8d;
		cursor: default;
	}
</style>
</head>
<body>

<h1>La propriété pointer-events css</h1>
<div style="position: relative;">
		<div style="position: absolute; top: 50px; left: 50px; width: 300px; height: 100px; background-color: rgba(255, 255, 255, 0.5); pointer-events: none;"></div>
		<div class="box">Selecionner le txte:
This is some basic flow content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.</div> </div> </body> </html>

Astuces et conseils d'utilisation de la propriété CSS pointer-events

Voici quelques astuces et conseils pour utiliser au mieux la propriété pointer-events :

  • La valeur none peut être utilisée pour désactiver les événements de souris sur un élément sans changer son apparence. Cela peut être utile pour empêcher les clics sur un élément de masquer un autre élément sous-jacent.
  • La valeur all peut être utilisée pour activer les événements de souris sur un élément malgré la présence d'autres éléments devant lui. Cela peut être utile pour les menus déroulants, les tooltips, etc.
  • La propriété pointer-events peut être combinée avec d'autres propriétés CSS pour créer des effets intéressants, par exemple en utilisant la transparence pour permettre les clics sur un élément sous un élément transparent.

Comme nous l'avons démontré plus haut, le principal cas d'utilisation des événements de pointeur consiste à permettre au comportement de clic ou de tapotement de "traverser" un élément pour atteindre un autre élément situé en dessous sur l'axe des Z. Cela peut être utile, par exemple, pour les superpositions graphiques ou pour masquer des éléments avec opacité (par exemple, les infobulles) tout en permettant la sélection de texte dans le contenu situé en dessous.

Points d'intérêt

"L'utilisation d'événements de pointeur en CSS pour les éléments non-SVG est expérimentale. Cette fonctionnalité faisait partie du projet de spécification CSS3 UI mais, en raison de nombreuses questions en suspens, elle a été reportée à CSS4." - Mozilla MDN

"Si vous ajoutez un récepteur d'événement de clic à un élément, puis supprimez le style pointer-events (ou changez sa valeur en auto), l'événement de clic déclenchera la fonctionnalité désignée. En fait, l'événement de clic respecte la valeur de pointer-events." - David Walsh

En conclusion, la propriété CSS pointer-events est un outil très utile pour contrôler le comportement des événements de souris sur les éléments HTML. En comprenant comment elle fonctionne et en l'utilisant judicieusement, vous pouvez améliorer l'expérience utilisateur de vos sites web.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion2113.64 9



Voir aussi nos tutoriel :

fonction checkdate

Valide une date grégorienne

Objet string javascript

Objet string javascript : L'objet String (ou chaîne de caractères) est employé pour manoeuvrer un texte ou une partie d’un texte.

Indique si une variable vaut NULL">is_null

 Indique si une variable vaut NULL