Comment contrôler l'indisponibilité des boutons avec CSS-tutoriel CSS-php.cn

Comment contrôler l'indisponibilité des boutons avec CSS

青灯夜游

Libérer： 2022-12-30 11:12:08

original

6488 Les gens l'ont consulté

Méthode : ajoutez le style "pointer-events:none;" à l'élément bouton afin que l'élément bouton ne devienne jamais la cible d'événements de souris, invalide son événement de clic et contrôle l'indisponibilité du bouton.

Comment contrôler l'indisponibilité des boutons avec CSS

L'environnement d'exploitation de ce tutoriel : système windows7, version css3&&html5, ordinateur Dell G3.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

En HTML, nous pouvons utiliser directement les attributs désactivés ou en lecture seule du HTML pour rendre le bouton non cliquable en CSS ; , Vous pouvez utiliser l'attribut pointer-events pour invalider les événements de clic.

Nous pouvons ajouter "pointer-events:none" deux styles CSS au bouton pour rendre le bouton non cliquable.

L'attribut pointer-events En plus d'indiquer que l'élément n'est pas la cible des événements de souris, la valeur none indique que l'événement de souris "pénètre" l'élément et spécifie tout ce qui est "en dessous" de l'élément. Invalidez l'événement de clic sur le bouton.

Exemple : CSS rend le bouton indisponible

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			button {
				opacity: 0.5;
				/*设置蒙版效果*/
				pointer-events: none;
				/*禁止鼠标事件*/
			}
		</style>
	</head>

	<body>
		<button>php中文网</button>
	</body>

</html>

Copier après la connexion

Explication :

Les éléments avec un style pointer-events:none ne seront jamais la cible d'événements de souris. Cependant, les événements de souris peuvent être dirigés vers des éléments descendants lorsque leur attribut pointer-events spécifie une valeur différente, auquel cas l'événement de souris déclenchera l'écouteur d'événements de l'élément parent pendant la phase de capture ou de bouillonnement.

Utiliser des événements de pointeur pour empêcher un élément d'être la cible d'événements de souris ne signifie pas nécessairement que l'écouteur d'événement sur l'élément ne se déclenchera jamais. Si un descendant d'élément spécifie explicitement l'attribut pointer-events et lui permet d'être la cible des événements de souris, alors tous les événements pointés vers cet élément se propageront à travers l'élément parent pendant la propagation des événements et déclencheront les écouteurs d'événements de la manière appropriée. . Bien entendu, l'activité de la souris sur l'écran qui se trouve sur l'élément parent mais pas sur l'élément descendant ne sera pas capturée par l'élément parent et les éléments descendants (passera par l'élément parent et pointera vers l'élément situé en dessous).

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!