Σε αυτό το άρθρο, θα μάθουμε πώς να απενεργοποιήσετε το συμβάν κλικ χρησιμοποιώντας CSS.

Λοιπόν, ας ξεκινήσουμε!

Πώς να απενεργοποιήσετε το συμβάν κλικ χρησιμοποιώντας CSS;

Μπορείτε να απενεργοποιήσετε τα συμβάντα κλικ χρησιμοποιώντας το CSS ' δείκτες-γεγονότα ” ιδιοκτησία. Αλλά, πηδώντας σε αυτό, θα σας το εξηγήσουμε εν συντομία.

Τι είναι η ιδιότητα CSS 'pointer-events';

Ο ' δείκτες-γεγονότα ” ελέγξτε τον τρόπο με τον οποίο τα στοιχεία HTML ανταποκρίνονται ή συμπεριφέρονται στο συμβάν αφής, όπως συμβάντα κλικ ή πάτημα, ενεργές καταστάσεις ή καταστάσεις τοποθέτησης του ποντικιού και εάν ο κέρσορας είναι ορατός ή όχι.

Σύνταξη
Η σύνταξη των συμβάντων-δείκτη είναι η εξής:

Η παραπάνω ιδιότητα λαμβάνει δύο τιμές, όπως ' αυτο ' και ' κανένας ”:

• αυτο: Χρησιμοποιείται για την εκτέλεση προεπιλεγμένων συμβάντων.
• κανένας: Χρησιμοποιείται για την απενεργοποίηση συμβάντων.

Σημείωση: Το παρακάτω παράδειγμα θα δείξει αρχικά πώς να προσθέσετε δύο ενεργά κουμπιά και, στη συνέχεια, θα απενεργοποιήσουμε το συμβάν κλικ του δεύτερου κουμπιού.

Παράδειγμα 1: Απενεργοποίηση συμβάντος κλικ των κουμπιών με χρήση CSS
Σε αυτό το παράδειγμα, θα δημιουργήσουμε μια επικεφαλίδα

και δύο κουμπιά. Στη συνέχεια, καθορίστε το ' κουμπί ' ως όνομα κλάσης του πρώτου κουμπιού και εκχωρήστε ' κουμπί ' και ' κουμπί 2 ” ως οι κλάσεις του δεύτερου κουμπιού.

HTML

< div >
< h1 > Απενεργοποίηση συμβάντος κλικ με χρήση CSS < / h1 >
< κουμπί τάξη = 'κουμπί' > Κουμπί ενεργοποίησης < / κουμπί >
< κουμπί τάξη = 'κουμπί 2' > Κουμπί απενεργοποίησης < / κουμπί >
< / div >

Στο CSS, ' .κουμπί ' χρησιμοποιείται για πρόσβαση και στα δύο κουμπιά που έχουν δημιουργηθεί στο αρχείο HTML. Στη συνέχεια, ορίστε το στυλ περιγράμματος ως ' κανένας ' και δώστε padding ως ' 25 εικονοστοιχεία '. Μετά από αυτό, ορίστε το χρώμα του κειμένου του κουμπιού ως ' rgb(29, 6, 31) ' και το φόντο του κουμπιού ως ' rgb(19, 192, 163) '. Θα ορίσουμε επίσης την ακτίνα ενός κουμπιού ως ' 5 εικονοστοιχεία '.

CSS

.κουμπί {
σύνορο : κανένας ;
υλικό παραγεμίσματος : 25 εικονοστοιχεία ;
χρώμα : rgb ( 29 , 6 , 31 ) ;
χρώμα του φόντου : rgb ( 19 , 192 , 163 ) ;
σύνορα-ακτίνα : 5 εικονοστοιχεία ;
}

Μετά από αυτό, θα εφαρμόσουμε την ψευδο-κλάση :active και στα δύο κουμπιά ως ' .button:ενεργό ' και ορίστε το χρώμα του κουμπιού ως ' rgb(200, 255, 0) ”:

.κουμπί : ενεργός {
χρώμα του φόντου : rgb ( 209 , 65 , 65 ) ;
}

Ως αποτέλεσμα, θα δείτε το ακόλουθο αποτέλεσμα:

Τώρα, θα προχωρήσουμε στο επόμενο μέρος στο οποίο θα απενεργοποιήσουμε το συμβάν κλικ για το δεύτερο κουμπί.

Για να το κάνετε αυτό, χρησιμοποιήστε ' .κουμπί2 ” για να αποκτήσετε πρόσβαση στο δεύτερο κουμπί, που δημιουργήθηκε στο αρχείο HTML, και μετά να ορίσετε την τιμή της ιδιότητας pointer-events ως “ κανένας ”:

.κουμπί2 {
δείκτες-γεγονότα : κανένας ;
}

Η χρήση της ιδιότητας pointer-events και η ρύθμιση της τιμής της σε non θα απενεργοποιήσει το συμβάν κλικ, το οποίο μπορεί να φανεί στην ακόλουθη έξοδο:

Παρέχουμε την ευκολότερη μέθοδο για την απενεργοποίηση του συμβάντος κλικ χρησιμοποιώντας CSS.

συμπέρασμα

Για να απενεργοποιήσετε το συμβάν κλικ σε HTML, το ' δείκτες-γεγονότα Χρησιμοποιείται η ιδιότητα του CSS. Για το σκοπό αυτό, προσθέστε ένα στοιχείο HTML και ορίστε την τιμή της ιδιότητας pointer-events ως ' κανένας ” για να απενεργοποιήσετε το συμβάν κλικ του. Αυτό το άρθρο εξηγεί πώς μπορείτε να απενεργοποιήσετε το συμβάν κλικ χρησιμοποιώντας CSS μαζί με το παράδειγμά του.