V tomto článku se naučíme, jak zakázat událost kliknutí pomocí CSS.

Takže, začněme!

Jak zakázat událost kliknutí pomocí CSS?

Události kliknutí můžete zakázat pomocí CSS “ ukazatele-události ' vlastnictví. Ale když do toho skočíme, stručně vám to vysvětlíme.

Co je vlastnost CSS „ukazatel-události“?

' ukazatele-události ” řídí, jak prvky HTML reagují nebo se chovají na událost dotyku, jako jsou události kliknutí nebo klepnutí, aktivní stavy nebo stavy najetí myší a zda je kurzor viditelný nebo ne.

Syntax
Syntaxe událostí ukazatele je následující:

Výše zmíněná vlastnost nabývá dvou hodnot, například „ auto ' a ' žádný “:

• auto: Používá se k provádění výchozích událostí.
• žádný: Používá se k deaktivaci událostí.

Poznámka: Níže uvedený příklad nejprve ukáže, jak přidat dvě aktivní tlačítka, a poté zakážeme událost kliknutí druhého tlačítka.

Příklad 1: Zakázání události kliknutí tlačítek pomocí CSS
V tomto příkladu vytvoříme nadpis

a dvě tlačítka. Dále zadejte „ knoflík ” jako název třídy prvního tlačítka a přiřaďte “ knoflík ' a ' tlačítko2 ” jako třídy druhého tlačítka.

HTML

< div >
< h1 > Zakázat událost kliknutí pomocí CSS < / h1 >
< knoflík třída = 'knoflík' > Povolit tlačítko < / knoflík >
< knoflík třída = 'tlačítko tlačítko2' > Tlačítko Zakázat < / knoflík >
< / div >

V CSS „ .knoflík ” se používá pro přístup k oběma tlačítkům vytvořeným v souboru HTML. Dále nastavte styl ohraničení jako „ žádný “ a zadejte výplň jako „ 25 pixelů “. Poté nastavte barvu textu tlačítka jako „ rgb(29, 6, 31) “ a pozadí tlačítka jako „ rgb(19, 192, 163) “. Nastavíme také poloměr tlačítka jako „ 5px “.

CSS

.knoflík {
okraj : žádný ;
vycpávka : 25 pixelů ;
barva : rgb ( 29 , 6 , 31 ) ;
barva pozadí : rgb ( 19 , 192 , 163 ) ;
hraniční poloměr : 5px ;
}

Poté použijeme pseudotřídu :active na obě tlačítka jako „ .tlačítko:aktivní “ a nastavte barvu tlačítka jako „ rgb(200, 255, 0) “:

.knoflík : aktivní {
barva pozadí : rgb ( 209 , 65 , 65 ) ;
}

V důsledku toho uvidíte následující výsledek:

Nyní přejdeme k další části, ve které deaktivujeme událost kliknutí pro druhé tlačítko.

Chcete-li to provést, použijte „ .tlačítko2 ” pro přístup k druhému tlačítku, vytvořenému v souboru HTML, a poté nastavte hodnotu vlastnosti pointer-events jako “ žádný “:

.tlačítko2 {
ukazatele-události : žádný ;
}

Použití vlastnosti pointer-events a nastavení její hodnoty na non deaktivuje událost click, kterou můžete vidět v následujícím výstupu:

Poskytli jsme nejjednodušší metodu pro deaktivaci události kliknutí pomocí CSS.

Závěr

Chcete-li zakázat událost kliknutí v HTML, „ ukazatele-události ” je použita vlastnost CSS. Pro tento účel přidejte element HTML a nastavte hodnotu vlastnosti pointer-events jako „ žádný ” pro deaktivaci události kliknutí. Tento článek vysvětluje, jak zakázat událost kliknutí pomocí CSS, spolu s jeho příkladem.