Informationen zum CSS-Code zur Verhinderung von Mausklickereignissen

In diesem Artikel wird erläutert, wie Sie Mausklickereignisse über reines CSS deaktivieren. Es ist flexibler als Javascript. Sie können darauf zurückgreifen, wenn Sie es benötigen.

JavaScript verfügt über eine preventDefault-Methode, mit der die Standardaktion eines Ereignisses abgebrochen werden kann. Zum Beispiel das Aufheben des Öffnens von Links, das Auswählen von Text oder das Ziehen und Ablegen usw.

event.preventDefault()

Diese Methode weist den Webbrowser an, die mit dem Ereignis verknüpfte Standardaktion nicht auszuführen (sofern eine solche Aktion vorhanden ist). Wenn das Typattribut beispielsweise „submit“ lautet, kann jeder Event-Handler in jeder Phase der Event-Weitergabe aufgerufen werden, und durch Aufrufen dieser Methode kann die Formularübermittlung verhindert werden. Beachten Sie, dass es keine Standardaktion gibt oder die Standardaktion nicht verhindert werden kann, wenn die cancelable-Eigenschaft des Event-Objekts fasle ist. In beiden Fällen hat der Aufruf dieser Methode keine Auswirkung.

Diese Methode kann das Standardverhalten des Browsers des aktuellen Elements verhindern, verhindert jedoch nicht, dass das übergeordnete Element und das Dokument auf das Ereignis reagieren. Wenn Sie das Ereignis vollständig abbrechen möchten, können Sie stopPropagation

event.stopPropagation()

verwenden, um die Ausbreitung des Ereignisses zu stoppen und zu verhindern, dass es an andere Dokument-Knoten gesendet wird . Es kann in jeder Phase der Ereignisausbreitung aufgerufen werden. Beachten Sie, dass diese Methode zwar nicht verhindert, dass andere Ereignishandler auf demselben Document-Knoten aufgerufen werden, sie jedoch verhindert, dass Ereignisse an andere Knoten gesendet werden.

Diese beiden Methoden werden häufig zum Abbrechen von Ereignissen in JS verwendet. Es gibt jedoch tatsächlich eine andere Möglichkeit, die Ereignisantwort mithilfe von reinem CSS abzubrechen: pointer-events, die bequemer zu verwenden ist , kann es:

1. verhindern, dass die Klickaktion des Benutzers irgendeine Wirkung erzeugt

2. die Anzeige des Standardmauszeigers verhindern

3. Hover und CSS verhindern CSS-Änderungen im aktiven Zustand lösen Ereignisse aus

4. Verhindern Sie Ereignisse, die durch JavaScript-Klickaktionen ausgelöst werden

Das folgende CSS hat beispielsweise den Effekt, dass deaktivierte Schaltflächen ausgegraut werden

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

Diese Methode ist offensichtlich flexibler als JS-Code, wird aber von IE9 leider nicht unterstützt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS3, um den Rand zu drehen, wenn die Maus darüber schwebt.

Verwenden Sie CSS3, um acht Gruppen zu erreichen von supercoolen Maus-über-Bild-Animationen

CSS3 implementiert Maus-Hover, um erweiterten Inhalt anzuzeigen

Das obige ist der detaillierte Inhalt vonInformationen zum CSS-Code zur Verhinderung von Mausklickereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!