Bu yazımızda CSS kullanarak click olayını nasıl devre dışı bırakacağımızı öğreneceğiz.

Haydi başlayalım!

CSS Kullanarak Tıklama Olayı Nasıl Devre Dışı Bırakılır?

CSS ' kullanarak tıklama olaylarını devre dışı bırakabilirsiniz. işaretçi olayları ' Emlak. Ancak, içine atlayarak, size kısaca açıklayacağız.

'İşaretçi olayları' CSS Özelliği nedir?

“ işaretçi olayları ” HTML öğelerinin tıklama veya dokunma olayları, etkin veya fareyle üzerine gelme durumları gibi dokunma olayına nasıl tepki verdiğini veya nasıl davrandığını ve imlecin görünür olup olmadığını kontrol eder.

Sözdizimi
İşaretçi olaylarının sözdizimi aşağıdaki gibidir:

Yukarıda bahsedilen özellik, “ gibi iki değer alır. Oto ' ve ' Yok ”:

• Oto: Varsayılan olayları gerçekleştirmek için kullanılır.
• Yok: Olayları devre dışı bırakmak için kullanılır.

Not: Aşağıdaki örnekte ilk olarak iki aktif butonun nasıl ekleneceğini gösterecek, ardından ikinci butonun click olayını devre dışı bırakacağız.

Örnek 1: CSS Kullanarak Düğmelerin Tıklama Olayını Devre Dışı Bırakma
Bu örnekte, bir

başlığı ve iki düğme oluşturacağız. Ardından, “ buton ” ilk düğmenin sınıf adı olarak ve “ buton ' ve ' button2 ” ikinci butonun sınıfları olarak.

HTML

< div >
< h1 > CSS Kullanarak Tıklama Olayını Devre Dışı Bırak < / h1 >
< buton sınıf = 'buton' > Etkinleştir Düğmesi < / buton >
< buton sınıf = 'düğme düğmesi2' > Devre Dışı Bırak Düğmesi < / buton >
< / div >

CSS'de, ' .buton ”, HTML dosyasında oluşturulan her iki düğmeye de erişmek için kullanılır. Ardından, kenarlık stilini “ Yok ” ve dolguyu “ olarak verin 25 piksel ”. Bundan sonra, düğme metninin rengini “ olarak ayarlayın. rgb(29, 6, 31) ” ve düğme arka planı “ rgb(19, 192, 163) ”. Ayrıca bir düğmenin yarıçapını “olarak ayarlayacağız. 5 piksel ”.

CSS

.buton {
sınır : Yok ;
dolgu malzemesi : 25 piksel ;
renk : rgb ( 29 , 6 , 31 ) ;
arka plan rengi : rgb ( 19 , 192 , 163 ) ;
sınır yarıçapı : 5 piksel ;
}

Daha sonra :active sözde sınıfını her iki butona da “ olarak uygulayacağız. .düğme:etkin ” ve düğmenin rengini “ olarak ayarlayın. rgb(200, 255, 0) ”:

.buton : aktif {
arka plan rengi : rgb ( 209 , 65 , 65 ) ;
}

Sonuç olarak, aşağıdaki sonucu göreceksiniz:

Şimdi ikinci buton için click olayını devre dışı bırakacağımız bir sonraki bölüme geçeceğiz.

Bunu yapmak için ' .button2 ” HTML dosyasında oluşturulan ikinci düğmeye erişmek ve bundan sonra pointer-events özelliğinin değerini “ olarak ayarlayın. Yok ”:

.button2 {
işaretçi olayları : Yok ;
}

pointer-events özelliğini kullanmak ve değerini non olarak ayarlamak, aşağıdaki çıktıda görülebilecek olan click olayını devre dışı bırakacaktır:

CSS kullanarak click olayını devre dışı bırakmanın en kolay yöntemini sağladık.

Çözüm

HTML'de tıklama olayını devre dışı bırakmak için “ işaretçi olayları CSS'nin ” özelliği kullanılır. Bunun için bir HTML öğesi ekleyin ve pointer-events özelliğinin değerini “ olarak ayarlayın. Yok ” tıklama olayını devre dışı bırakmak için. Bu makale, örneğiyle birlikte CSS kullanarak click olayının nasıl devre dışı bırakılacağını açıklamaktadır.