Sa artikulong ito, matututunan natin kung paano i-disable ang kaganapan ng pag-click gamit ang CSS.

Kaya, magsimula tayo!

Paano I-disable ang Click Event Gamit ang CSS?

Maaari mong huwag paganahin ang mga kaganapan sa pag-click gamit ang CSS ' pointer-kaganapan ” ari-arian. Ngunit, sa paglundag dito, maikli naming ipapaliwanag ito sa iyo.

Ano ang 'pointer-events' CSS Property?

Ang ' pointer-kaganapan ” kontrolin kung paano tumutugon o kumikilos ang mga elemento ng HTML sa kaganapan ng pagpindot, gaya ng mga kaganapan sa pag-click o pag-tap, mga estado ng aktibo o pag-hover, at kung nakikita o hindi ang cursor.

Syntax
Ang syntax ng pointer-events ay ang mga sumusunod:

Ang pag-aari na binanggit sa itaas ay tumatagal ng dalawang halaga, tulad ng ' sasakyan 'at' wala ”:

• sasakyan: Ito ay ginagamit upang magsagawa ng mga default na kaganapan.
• wala: Ito ay ginagamit upang huwag paganahin ang mga kaganapan.

Tandaan: Ang halimbawang ibinigay sa ibaba ay unang magpapakita kung paano magdagdag ng dalawang aktibong button, at pagkatapos ay idi-disable namin ang kaganapan ng pag-click ng pangalawang button.

Halimbawa 1: Hindi Paganahin ang Kaganapan ng Pag-click ng Mga Button Gamit ang CSS
Sa halimbawang ito, gagawa kami ng heading

at dalawang button. Susunod, tukuyin ang ' pindutan ” bilang pangalan ng klase ng unang button, at italaga ang “ pindutan 'at' buton2 ” bilang mga klase ng pangalawang button.

HTML

< div >
< h1 > I-disable ang Click Event Gamit ang CSS < / h1 >
< pindutan klase = 'button' > Paganahin ang Pindutan < / pindutan >
< pindutan klase = 'button na pindutan2' > I-disable ang Button < / pindutan >
< / div >

Sa CSS, ' .button ” ay ginagamit upang ma-access ang parehong mga pindutan na ginawa sa HTML file. Susunod, itakda ang istilo ng hangganan bilang “ wala ” at bigyan ng padding bilang “ 25px ”. Pagkatapos nito, itakda ang kulay ng text ng button bilang “ rgb(29, 6, 31) ” at ang background ng button bilang “ rgb(19, 192, 163) ”. Itatakda din namin ang radius ng isang button bilang ' 5px ”.

CSS

.button {
hangganan : wala ;
padding : 25px ;
kulay : rgb ( 29 , 6 , 31 ) ;
kulay ng background : rgb ( 19 , 192 , 163 ) ;
hangganan-radius : 5px ;
}

Pagkatapos nito, ilalapat namin ang :active pseudo-class sa parehong mga pindutan bilang ' .button:aktibo ” at itakda ang kulay ng button bilang “ rgb(200, 255, 0) ”:

.button : aktibo {
kulay ng background : rgb ( 209 , 65 , 65 ) ;
}

Bilang resulta, makikita mo ang sumusunod na kinalabasan:

Ngayon, lilipat kami sa susunod na bahagi kung saan hindi namin paganahin ang kaganapan ng pag-click para sa pangalawang pindutan.

Upang gawin ito, gamitin ang ' .button2 ” para ma-access ang pangalawang button, na nilikha sa HTML file, at pagkatapos nito, itakda ang halaga ng pointer-events property bilang “ wala ”:

.button2 {
pointer-kaganapan : wala ;
}

Ang paggamit ng pointer-events property at pagtatakda ng value nito sa non ay magdi-disable sa click event, na makikita sa sumusunod na output:

Nagbigay kami ng pinakamadaling paraan para sa hindi pagpapagana ng kaganapan ng pag-click gamit ang CSS.

Konklusyon

Upang huwag paganahin ang kaganapan ng pag-click sa HTML, ang ' pointer-kaganapan ” ang pag-aari ng CSS ay ginagamit. Para sa layuning ito, magdagdag ng HTML element at itakda ang halaga ng pointer-events property bilang “ wala ” upang huwag paganahin ang kaganapan ng pag-click nito. Ipinaliwanag ng artikulong ito kung paano i-disable ang kaganapan sa pag-click gamit ang CSS kasama ang halimbawa nito.