Kuinka simuloida napsautusta JavaScriptillä?
Seuraavat lähestymistavat voidaan ottaa käyttöön napsautussimuloinnin käyttämiseksi JavaScriptissä:
Lähestymistapa 1: Simuloi klikkaus JavaScriptillä käyttämällä onclick-tapahtumaa
' klikkaamalla ”tapahtuma tapahtuu, kun painiketta painetaan. Tätä lähestymistapaa voidaan soveltaa funktion käynnistämiseen painikkeen napsautuksella ja suurentaa ' napsautusten määrä ” aina kun painiketta napsautetaan.
Sivuhuomautus: ' klikkaamalla ” -tapahtumaa voidaan yksinkertaisesti käyttää liittämällä se tietyllä toiminnolla.
Esimerkki
Käy läpi seuraava koodinpätkä:
< keskusta >
< h3 tyyliin = 'taustaväri: vaaleansininen;' > Napsauta Simuloitu < jänneväli luokkaa = 'Kreivi' > jänneväli > ajat h3 >
< painikkeen tunnus = 'btn1' klikkaamalla = 'countClick()' > Napsauta Minä ! -painiketta >
keskusta >
- Sisällytä määritetty otsikko yhdessä ' '-tunniste suurentaa ' Kreivi ' napsautuksia.
- Luo seuraavassa vaiheessa painike, johon on liitetty ' klikkaamalla ”-tapahtuma, joka ohjaa funktioon countClick(), joka avataan painiketta napsauttamalla.
Käydään nyt läpi seuraavat JavaScript-koodirivit:
< käsikirjoitus >
anna klikkauksia = 0 ;
funktio countClick ( ) {
napsautuksia = napsautuksia + 1 ;
asiakirja. querySelector ( '.Kreivi' ) . tekstisisältö = napsautuksia ;
}
käsikirjoitus >
Yllä olevassa koodin js-osassa:
- Aloita tässä ensin napsautukset ' 0 ”.
- Ilmoita sen jälkeen funktio nimeltä ' countClick() ”. Lisää sen määritelmässä alustettua ' napsautuksia ' kanssa ' 1 ”. Tämä lisää määrää joka kerta, kun painiketta napsautetaan.
- Avaa lopuksi ' jänneväli ' -elementti käyttämällä ' document.querySelector() ”menetelmä. Käytä myös ' tekstisisältö ” -ominaisuutta, joka osoittaa aiemmin käsitellyn lisätyn napsautusmäärän span-elementille.
Tulos on seuraava:
Lisätyn ajastimen toiminnallisuus jokaisella napsautuksella voidaan havaita yllä olevassa lähdössä.
Lähestymistapa 2: Simuloi klikkaus JavaScriptillä addEventListener()-menetelmän avulla
' addEventListener() ” -menetelmä varaa elementille tapahtumakäsittelijän. Tämä menetelmä voidaan toteuttaa liittämällä tietty tapahtuma elementtiin ja hälyttämällä käyttäjää tapahtuman laukaisusta.
Syntaksi
elementti. addEventListener ( tapahtuma, toiminto )Annetussa syntaksissa:
- ' tapahtuma ” viittaa tapahtuman nimeen.
- ' toiminto ” osoittaa toimintoon, joka suoritetaan tapahtuman sattuessa.
Esimerkki
Alla oleva esitys selittää esitetyn konseptin:
< keskusta >< kehon >< a href = '#' id = 'linkki' > Napsauta linkkiä a >
kehon > keskusta >
< käsikirjoitus >
olla vuohi = asiakirja. getElementById ( 'linkki' ) ;
saada. addEventListener ( 'klikkaus' , ( ) => hälytys ( 'Napsauta Simuloitu!' ) )
käsikirjoitus >
Yllä olevassa koodissa:
- Määritä ensin ' ankkuri ” -tunnisteen sisältämään määritetyn linkin
- Käytä koodin JavaScript-osassa luotua linkkiä käyttämällä ' document.getElementById() ”menetelmä.
- Käytä lopuksi ' addEventListener() '-menetelmä käytettyyn' linkki ”. ' klikkaus ” -tapahtuma on tässä tapauksessa liitetty, mikä aiheuttaa hälytyksen käyttäjälle, kun hän klikkaa luotua linkkiä.
Lähtö
Lähestymistapa 3: Simuloi klikkaus JavaScriptillä käyttämällä click()-menetelmää
' klikkaus() ” -menetelmä suorittaa hiiren napsautus simulaation elementille. Tällä menetelmällä voidaan simuloida napsautusta suoraan liitettyihin painikkeisiin nimen mukaan.
Syntaksi
elementti. klikkaus ( )Annetussa syntaksissa:
- ' elementti ” osoittaa elementtiin, johon napsautus suoritetaan.
Esimerkki
Seuraava koodinpätkä selittää esitetyn käsitteen:
< keskusta >< kehon >< h3 > Löysitkö Tämä sivu hyödyllinen ? h3 >
< painiketta onclick = 'simulateClick()' id = 'simuloida' > Joo -painiketta >
< painiketta onclick = 'simulateClick()' id = 'simuloida' > Ei -painiketta >
< h3 id = 'pää' tyyli = 'taustaväri: vaaleanvihreä;' > h3 >
kehon > keskusta >
- Sisällytä ensin mainittu otsikko '
' -tunniste. - Luo sen jälkeen kaksi erilaista painiketta määritetyillä tunnuksilla.
- Liitä myös ' klikkaamalla ” tapahtuma, jossa molemmat kutsuvat funktion simulateClick().
- Lisää seuraavassa vaiheessa toinen otsikko määritetyllä ' id ' ilmoittaakseen käyttäjälle heti, kun ' klikkaus ” on simuloitu.
Käy nyt läpi alla annetut JavaScript-rivit:
< käsikirjoitus >toiminto simulateClick ( ) {
asiakirja. getElementById ( 'simuloida' ) . klikkaus ( )
anna saada = asiakirja. getElementById ( 'pää' )
saada. sisäteksti = 'Napsauta Simuloitu!'
}
käsikirjoitus >
- Määritä funktio ' simulateClick() ”.
- Täällä voit käyttää luotuja painikkeita käyttämällä ' document.getElementById() ' -menetelmää ja käytä ' klikkaus() ”menetelmä heille.
- Avaa nyt samalla tavalla osoitettu otsikko ja käytä ' sisäteksti ” -ominaisuutta näyttääksesi ilmoitetun viestin otsikona simuloidun napsautuksen jälkeen.
Lähtö
Yllä olevassa tulosteessa on selvää, että molemmat luodut painikkeet simuloivat napsautusta.
Tämä blogi näyttää, kuinka napsautussimulaatiota käytetään JavaScriptin avulla.
Johtopäätös
' klikkaamalla 'tapahtuma, ' addEventListener() ”menetelmä tai ” klikkaus() ” -menetelmää voidaan käyttää klikkauksen simuloimiseen JavaScriptillä. ' klikkaamalla ” -tapahtumaa voidaan soveltaa simuloimaan napsautusta joka kerta, kun painiketta napsautetaan laskurin muodossa. ' addEventListener() ” -menetelmällä voidaan liittää tapahtuma linkkiin ja ilmoittaa käyttäjälle napsautussimulaatiosta. ' klikkaus() ” -menetelmää voidaan soveltaa luotuihin painikkeisiin ja se suorittaa tarvittavat toiminnot jokaiselle painikkeelle. Tämä kirjoitus selittää, kuinka napsautussimulaatiota käytetään JavaScriptissä.