V tomto článku sa naučíme, ako vypnúť udalosť kliknutia pomocou CSS.

Takže, začnime!

Ako zakázať udalosť kliknutia pomocou CSS?

Udalosti kliknutia môžete zakázať pomocou CSS “ ukazovateľ-udalosti ' nehnuteľnosť. Ale keď do toho skočíme, stručne vám to vysvetlíme.

Čo je vlastnosť CSS „ukazovateľ-udalosti“?

' ukazovateľ-udalosti ” ovládať, ako prvky HTML reagujú alebo sa správajú na udalosť dotyku, ako sú udalosti kliknutia alebo klepnutia, aktívne stavy alebo stavy kurzora a či je kurzor viditeľný alebo nie.

Syntax
Syntax udalostí ukazovateľa je nasledovná:

Vyššie uvedená vlastnosť nadobúda dve hodnoty, ako napríklad „ auto “ a „ žiadny “:

• auto: Používa sa na vykonávanie predvolených udalostí.
• žiadne: Používa sa na deaktiváciu udalostí.

Poznámka: Nižšie uvedený príklad najprv ukáže, ako pridať dve aktívne tlačidlá, a potom zakážeme udalosť kliknutia druhého tlačidla.

Príklad 1: Zakázanie udalosti kliknutia tlačidiel pomocou CSS
V tomto príklade vytvoríme nadpis

a dve tlačidlá. Ďalej špecifikujte „ tlačidlo ” ako názov triedy pre prvé tlačidlo a priraďte “ tlačidlo “ a „ tlačidlo2 ” ako triedy druhého tlačidla.

HTML

< div >
< h1 > Zakázať udalosť kliknutia pomocou CSS < / h1 >
< tlačidlo trieda = 'tlačidlo' > Povoliť tlačidlo < / tlačidlo >
< tlačidlo trieda = 'tlačidlo button2' > Tlačidlo Zakázať < / tlačidlo >
< / div >

V CSS „ .tlačidlo ” sa používa na prístup k obom tlačidlám vytvoreným v súbore HTML. Ďalej nastavte štýl okraja ako „ žiadny “ a zadajte výplň ako „ 25 pixelov “. Potom nastavte farbu textu tlačidla ako „ rgb(29, 6, 31) “ a pozadie tlačidla ako „ rgb(19, 192, 163) “. Nastavíme tiež polomer tlačidla ako „ 5 pixelov “.

CSS

.tlačidlo {
hranica : žiadny ;
vypchávka : 25 pixelov ;
farba : rgb ( 29 , 6 , 31 ) ;
farba pozadia : rgb ( 19 , 192 , 163 ) ;
hraničný polomer : 5 pixelov ;
}

Potom použijeme pseudotriedu :active na obe tlačidlá ako „ .tlačidlo:aktívne “ a nastavte farbu tlačidla ako „ rgb(200, 255, 0) “:

.tlačidlo : aktívny {
farba pozadia : rgb ( 209 , 65 , 65 ) ;
}

V dôsledku toho uvidíte nasledujúci výsledok:

Teraz prejdeme k ďalšej časti, v ktorej zakážeme udalosť kliknutia pre druhé tlačidlo.

Ak to chcete urobiť, použite „ .tlačidlo2 ” pre prístup k druhému tlačidlu vytvorenému v súbore HTML a potom nastavte hodnotu vlastnosti pointer-events ako “ žiadny “:

.tlačidlo2 {
ukazovateľ-udalosti : žiadny ;
}

Použitím vlastnosti pointer-events a nastavením jej hodnoty na non zakážete udalosť kliknutia, čo je možné vidieť v nasledujúcom výstupe:

Poskytli sme najjednoduchší spôsob deaktivácie udalosti kliknutia pomocou CSS.

Záver

Ak chcete zakázať udalosť kliknutia v HTML, „ ukazovateľ-udalosti ” sa používa vlastnosť CSS. Na tento účel pridajte prvok HTML a nastavte hodnotu vlastnosti pointer-events ako „ žiadny ” na deaktiváciu udalosti kliknutia. Tento článok vysvetľuje, ako zakázať udalosť kliknutia pomocou CSS, spolu s jeho príkladom.