Beispielcode zum Deaktivieren von Mausklickereignissen mit reinem CSS

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.

Kopieren Sie den Code

Der Code lautet wie folgt:

event.preventDefault()

Diese Methode benachrichtigt den Webbrowser, ihn nicht auszuführen der mit der Ereignisaktion verknüpfte Standardwert (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 die Veranstaltung vollständig absagen möchten, können Sie stopPropagation

Code kopieren

Der Code lautet wie folgt folgt:

event.stopPropagation()

Diese Methode stoppt die Ausbreitung des Ereignisses und verhindert so, 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

Code kopieren

Der Code lautet wie folgt:

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

Diese Methode ist offensichtlich flexibler als js-Code, wird aber leider von IE9 nicht unterstützt . Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium und die Arbeit aller hilfreich sein.

Verwandte Empfehlungen:

Methode zur Einstellung der CSS-Textschriftfarbe (CSS-Farbe)

Das obige ist der detaillierte Inhalt vonBeispielcode zum Deaktivieren von Mausklickereignissen mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!