Heim > Artikel > Web-Frontend > So steuern Sie die Nichtverfügbarkeit von Schaltflächen mit CSS
So steuern Sie die Nichtverfügbarkeit von Schaltflächen mit CSS
- 青灯夜游Original
- 2021-01-19 15:46:046476Durchsuche
Methode: Fügen Sie dem Schaltflächenelement den Stil „pointer-events:none;“ hinzu, damit das Schaltflächenelement niemals zum Ziel von Mausereignissen wird, sein Klickereignis ungültig wird und die Schaltfläche so gesteuert wird, dass sie nicht verfügbar ist.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
(Lernvideo-Sharing: css-Video-Tutorial)
In HTML können wir die deaktivierten oder schreibgeschützten Attribute von HTML direkt verwenden, um die Schaltfläche nicht anklickbar zu machen; und in CSS können wir das pointer-events-Attribut verwenden, um Machen Sie das Klickereignis ungültig.
Wir können der Schaltfläche zwei CSS-Stile „pointer-events:none“ hinzufügen, um die Schaltfläche nicht anklickbar zu machen.
pointer-events-Attribut Der Wert „Keine“ gibt nicht nur an, dass das Element nicht das Ziel von Mausereignissen ist, sondern bedeutet auch, dass Mausereignisse dieses Element „durchdringen“ und alles „unterhalb“ des Elements angeben. Machen Sie das Klickereignis auf der Schaltfläche ungültig.
Beispiel: CSS macht die Schaltfläche nicht verfügbar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {
opacity: 0.5;
/*设置蒙版效果*/
pointer-events: none;
/*禁止鼠标事件*/
}
</style>
</head>
<body>
<button>php中文网</button>
</body>
</html>Erklärung:
Elemente mit dem Stil „pointer-events:none“ werden niemals das Ziel von Mausereignissen sein. Mausereignisse können jedoch an untergeordnete Elemente weitergeleitet werden, wenn deren pointer-events-Attribut einen anderen Wert angibt. In diesem Fall löst das Mausereignis den Ereignis-Listener des übergeordneten Elements während der Erfassungs- oder Bubbling-Phase aus.
Die Verwendung von Zeigerereignissen, um zu verhindern, dass ein Element das Ziel von Mausereignissen ist, bedeutet nicht unbedingt, dass der Ereignis-Listener auf dem Element niemals ausgelöst wird. Wenn ein Nachkomme eines Elements explizit das Attribut pointer-events angibt und zulässt, dass es das Ziel von Mausereignissen ist, werden alle Ereignisse, die auf dieses Element verweisen, während der Ereignisweitergabe durch das übergeordnete Element weitergegeben und lösen die darauf befindlichen Ereignis-Listener auf die entsprechende Weise aus. . Natürlich wird die Mausaktivität auf dem Bildschirm, die sich auf dem übergeordneten Element, aber nicht auf dem untergeordneten Element befindet, nicht vom übergeordneten Element und den untergeordneten Elementen erfasst (sie verläuft durch das übergeordnete Element und zeigt auf das darunter liegende Element).
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !
Das obige ist der detaillierte Inhalt vonSo steuern Sie die Nichtverfügbarkeit von Schaltflächen mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!