CSS-osoitintapahtuma-ominaisuuden käyttäminen

Css Osoitintapahtuma Ominaisuuden Kayttaminen



Kun kehität verkkosivustoa, saatat haluta rajoittaa katsojia suorittamasta tiettyjä toimintoja (napsauttaminen/liivittäminen) joillakin verkkosivuston elementeillä, kuten kuvilla tai hyperlinkeillä. Syitä voi olla useita; et esimerkiksi halua käyttäjän napsauttavan linkkiä, koska se on verkkosivuston sisäisen linkitysrakenteen parantaminen tai linkin sisällä olevan sisällön suojaaminen. Tällaisissa skenaarioissa CSS-osoitin-tapahtumat -ominaisuutta voidaan käyttää vaadittujen tulosten saamiseksi.

Tässä kirjoituksessa kerromme tarkemmin, kuinka CSS-osoitin-tapahtumat -ominaisuutta käytetään.

Mikä on osoitintapahtuma-omaisuus?

CSS ' osoitin-tapahtumat ”-ominaisuus määrittää osoittimen/napautuskäyttäytymisen HTML-elementtiin nähden ja vastaako valittu elementti suorittamalla toimintoja, kuten osoittimen tai napsautuksen.







Miten osoitintapahtuma-omaisuutta käytetään?

CSS:ssä pointer-events-ominaisuutta voidaan käyttää osoitintoimintojen käyttöön tai poistamiseen tietyissä HTML-elementeissä. Osoitin-tapahtumat -ominaisuuden syntaksi on annettu alla.



Syntaksi



osoitin-tapahtumat : ei mitään | auto ;

Mainitussa syntaksissa ' auto ' on pointer-events -ominaisuuden oletusarvo, ja se mahdollistaa osoittimen toiminnan kohti elementtiä ja ' ei mitään ” on täysin päinvastainen kuin auto; se estää osoitintoiminnon HTML-elementeissä.





Siirrytään eteenpäin ja otetaan esimerkki ymmärtääksemme osoitintapahtumat-ominaisuuden.

Esimerkki 1
Määritä HTML-tiedostossamme ankkuritunniste tekstillä ' LinuxHint.io ” ja aseta se runko-osaan.



HTML

< a href = 'https://www.linuxhint.io/' > LinuxHint.io < / a >

Nyt käytämme ' osoitin-tapahtumat 'ominaisuus ja anna sille arvo' ei mitään ”. Tämä poistaa elementin osoittimen toiminnon käytöstä.

CSS

a {
osoitin-tapahtumat : ei mitään ;
}

Tallenna HTML-tiedostosi mainitulla koodilla ja suorita se selaimellasi:

Otetaan toinen esimerkki kattaaksemme osoitintapahtuma-ominaisuuden perusteellisesti.

Esimerkki 2
Aseta osoitintapahtumat -ominaisuuden arvoksi ' auto ' tällä kertaa. Se saa elementin vastaamaan osoittimen päälle tai napsauttamaan. Auto on kuitenkin osoitin-tapahtumat -ominaisuuden oletusarvo.

CSS

a {
osoitin-tapahtumat : auto ;
}

Lähtö

Olemme käsitelleet CSS-osoitintapahtuma-ominaisuuden erilaisia ​​käyttötapoja.

Johtopäätös

Ohjaustoimintojen ohjaamiseen voimme käyttää CSS:ää ' osoitin-tapahtumat ” omaisuutta. ' auto ” arvo on tämän ominaisuuden ennalta määritetty arvo; se mahdollistaa toiminnot HTML-elementtien yli. Kun osoitin-tapahtumat-ominaisuutta käytetään arvolla ' ei mitään ”, se poistaa käytöstä tiettyä elementtiä koskevat toiminnot. Tämä kirjoitus on osoittanut, kuinka CSS-osoitin-tapahtumat -ominaisuutta käytetään.