Maison > Article > interface Web > Comment contrôler l'indisponibilité des boutons avec CSS
Comment contrôler l'indisponibilité des boutons avec CSS
- 青灯夜游original
- 2021-01-19 15:46:046457parcourir
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.
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>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!