Как да симулирам щракване с JavaScript?
Следните подходи могат да бъдат приложени за прилагане на симулация на кликване в JavaScript:
Подход 1: Симулирайте кликване с JavaScript с помощта на събитието onclick
един „ onclick ” възниква при натискане на бутона. Този подход може да се приложи за извикване на функция при щракване на бутона и увеличаване на „ брой кликове ” при всяко натискане на бутона.
Странична бележка: един „ onclick ” може просто да се приложи, като се прикачи към определена функция.
Пример
Преминете през следния кодов фрагмент:
< център >
< h3 стил = 'цвят на фона: светлосин;' > Щракнете върху Симулирано < педя клас = 'броя' > педя > пъти h3 >
< идентификатор на бутона = 'btn1' onclick = 'countClick()' > Щракнете върху мен ! бутон >
център >
- Включете посоченото заглавие заедно с „ ” таг за увеличаване на „ броя ” кликвания.
- В следващата стъпка създайте бутон с прикачен „ onclick ” събитие, пренасочващо към функцията countClick(), която ще бъде достъпна при натискане на бутона.
Сега нека да преминем през следните кодови редове на JavaScript:
< сценарий >
нека кликвания = 0 ;
функция countClick ( ) {
кликвания = кликвания + 1 ;
документ. querySelector ( '.броя' ) . textContent = кликвания ;
}
сценарий >
В горната js част от кода:
- Тук първо инициализирайте кликванията с „ 0 ”.
- След това декларирайте функция с име „ countClick() ”. В неговата дефиниция увеличете инициализираното „ кликвания ' с ' 1 ”. Това ще доведе до увеличаване на броя всеки път, когато се щракне върху бутона.
- И накрая, достъп до „ педя ' елемент с помощта на ' document.querySelector() ” метод. Също така приложете „ textContent ” за разпределяне на увеличения брой щраквания, обсъден преди, към елемента span.
Резултатът ще бъде както следва:
Функционалността на увеличаващия се таймер при всяко щракване може да се наблюдава в горния резултат.
Подход 2: Симулирайте кликване с JavaScript чрез метода addEventListener().
„ addEventListener() ” метод разпределя манипулатор на събитие към елемент. Този метод може да се приложи чрез прикачване на конкретно събитие към елемент и предупреждение на потребителя при задействане на събитието.
Синтаксис
елемент. addEventListener ( събитие, функция )В дадения синтаксис:
- “ събитие ” се отнася до името на събитието.
- “ функция ” сочи към функцията, която да се изпълни при възникване на събитието.
Пример
Демонстрацията по-долу обяснява заявената концепция:
< център >< тяло >< a href = '#' документ за самоличност = 'връзка' > Кликнете върху връзката а >
тяло > център >
< сценарий >
бъди коза = документ. getElementById ( 'връзка' ) ;
получавам. addEventListener ( 'клик' , ( ) => тревога ( „Щракнете Симулирано!“ ) )
сценарий >
В горния код:
- Първо, посочете „ котва ”, за да включите посочената връзка
- В JavaScript частта на кода отворете създадената връзка, като използвате „ document.getElementById() ” метод.
- Накрая приложете „ addEventListener() ' метод към достъпното ' връзка ”. „ щракнете ” е прикачено събитие в този случай, което ще доведе до предупреждение на потребителя при щракване върху създадената връзка.
Изход
Подход 3: Симулирайте кликване с JavaScript с помощта на метода click().
„ клик() ” изпълнява симулация на щракване с мишката върху елемент. Този метод може да се използва за симулиране на щракване директно върху прикрепените бутони, както се посочва в името.
Синтаксис
елемент. щракнете ( )В дадения синтаксис:
- “ елемент ” сочи към елемента, върху който ще се изпълни щракването.
Пример
Следният кодов фрагмент обяснява заявената концепция:
< център >< тяло >< h3 > Намери ли това полезна страница ? h3 >
< бутон при щракване = 'simulateClick()' документ за самоличност = 'симулирам' > да бутон >
< бутон при щракване = 'simulateClick()' документ за самоличност = 'симулирам' > не бутон >
< h3 id = 'глава' стил = 'цвят на фона: светлозелено;' > h3 >
тяло > център >
- Първо, включете посоченото заглавие в „ <център> ” таг.
- След това създайте два различни бутона с посочените идентификатори.
- Освен това прикачете „ onclick ” събитие, като и двете извикват функцията simulateClick().
- В следващата стъпка включете друго заглавие с посоченото „ документ за самоличност “, за да уведомите потребителя веднага щом „ щракнете ” се симулира.
Сега преминете през дадените по-долу редове на JavaScript:
< сценарий >функция simulateClick ( ) {
документ. getElementById ( 'симулирам' ) . щракнете ( )
нека вземем = документ. getElementById ( 'глава' )
получавам. innerText = „Щракнете Симулирано!“
}
сценарий >
- Дефинирайте функция ' simulateClick() ”.
- Тук достъпете създадените бутони с помощта на „ document.getElementById() ” и приложете „ клик() ” към тях.
- Сега по подобен начин отворете разпределеното заглавие и приложете „ innerText ” за показване на посоченото съобщение като заглавие при симулираното кликване.
Изход
В горния резултат е очевидно, че и двата създадени бутона симулират щракване.
Този блог демонстрира как да приложите симулация на кликване с помощта на JavaScript.
Заключение
един „ onclick ” събитие, „ addEventListener() ” или метода „ клик() ” може да се използва за симулиране на кликване с JavaScript. един „ onclick ” събитие може да се приложи за симулиране на щракване при всяко щракване върху бутона под формата на брояч. „ addEventListener() ” може да се използва за прикачване на събитие към връзката и уведомяване на потребителя при симулацията на кликване. „ клик() ” методът може да се приложи към създадените бутони и изпълнява необходимата функционалност за всеки от бутоните. Тази статия обяснява как да приложите симулация на кликване в JavaScript.