Ebben a cikkben megtudjuk, hogyan lehet letiltani a kattintási eseményt CSS használatával.
Szóval, kezdjük!
Hogyan lehet letiltani a kattintási eseményt CSS használatával?
A kattintási eseményeket a CSS segítségével tilthatja le pointer-események ' ingatlan. De belevágva röviden elmagyarázzuk Önnek.
Mi az a „pointer-events” CSS-tulajdon?
Az ' pointer-események ” szabályozza, hogy a HTML-elemek hogyan reagáljanak vagy viselkedjenek az érintési eseményre, például a kattintási vagy koppintási eseményekre, az aktív vagy lebegtető állapotokra, és hogy a kurzor látható-e vagy sem.
Szintaxis
A mutatóesemények szintaxisa a következő:
pointer-események : auto | egyik sem ;
A fent említett tulajdonság két értéket vesz fel, például ' auto ” és „ egyik sem ”:
- auto: Az alapértelmezett események végrehajtására szolgál.
- egyik sem: Az események letiltására szolgál.
Megjegyzés: Az alábbi példa először bemutatja, hogyan kell hozzáadni két aktív gombot, majd letiltjuk a második gomb kattintási eseményét.
1. példa: A gombok kattintási eseményének letiltása CSS használatával
Ebben a példában létrehozunk egy
címsort és két gombot. Ezután adja meg a „ gomb ” az első gomb osztályneveként, és rendelje hozzá a „ gomb ” és „ gomb2 ” mint a második gomb osztályai.
HTML
< div >< h1 > Kattintási esemény letiltása CSS használatával < / h1 >
< gomb osztály = 'gomb' > Engedélyezés gomb < / gomb >
< gomb osztály = 'gomb gomb 2' > Letiltás gomb < / gomb >
< / div >
A CSS-ben „ .gomb ” a HTML-fájlban létrehozott mindkét gomb eléréséhez használható. Ezután állítsa be a szegélystílust ' egyik sem ', és adja meg a kitöltést ' 25 képpont ”. Ezután állítsa be a gomb szövegének színét ' rgb(29, 6, 31) ', a gomb háttere pedig ' rgb(19, 192, 163) ”. A gomb sugarát is beállítjuk a következőképpen: 5 képpont ”.
CSS
.gomb {határ : egyik sem ;
párnázás : 25 képpont ;
szín : rgb ( 29 , 6 , 31 ) ;
háttérszín : rgb ( 19 , 192 , 163 ) ;
határ-sugár : 5 képpont ;
}
Ezt követően mindkét gombon alkalmazzuk az :active pszeudoosztályt, mint ' .button:aktív ” és állítsa be a gomb színét „ rgb(200; 255; 0) ”:
.gomb : aktív {háttérszín : rgb ( 209 , 65 , 65 ) ;
}
Ennek eredményeként a következő eredményt fogja látni:
Most áttérünk a következő részre, amelyben letiltjuk a második gomb kattintási eseményét.
Ehhez használja a „ .gomb2 ” a HTML-fájlban létrehozott második gomb eléréséhez, majd ezt követően állítsa be a pointer-events tulajdonság értékét a „ egyik sem ”:
.gomb2 {pointer-események : egyik sem ;
}
A pointer-events tulajdonság használata és értékének non-ra állítása letiltja a kattintási eseményt, ami a következő kimeneten látható:
Megadtuk a legegyszerűbb módszert a kattintási esemény CSS használatával történő letiltására.
Következtetés
A kattintási esemény letiltásához HTML-ben a „ pointer-események ” a CSS tulajdonságot használják. Ebből a célból adjon hozzá egy HTML elemet, és állítsa be a pointer-events tulajdonság értékét a következőre: ' egyik sem ” a kattintási esemény letiltásához. Ez a cikk elmagyarázza, hogyan lehet letiltani a kattintási eseményt CSS használatával, a példájával együtt.