Как имитировать клик с помощью JavaScript?
Следующие подходы могут быть реализованы для применения имитации кликов в JavaScript:
Подход 1: имитация клика с помощью JavaScript с использованием события onclick
« по щелчку ” происходит при нажатии кнопки. Этот подход можно применять для вызова функции по нажатию кнопки и увеличения « количество кликов ” при каждом нажатии кнопки.
Примечание: « по щелчку ” можно просто применить, прикрепив к нему определенную функцию.
Пример
Просмотрите следующий фрагмент кода:
< центр >
< стиль h3 знак равно 'цвет фона: голубой;' > Нажмите Моделирование < охватывать учебный класс знак равно 'считать' > охватывать > раз h3 >
< идентификатор кнопки знак равно 'бтн1' по щелчку знак равно 'количество кликов()' > Нажми на меня ! кнопка >
центр >
- Включите указанный заголовок вместе с « <диапазон> », чтобы увеличить « считать ” кликов.
- На следующем шаге создайте кнопку с прикрепленным « по щелчку », перенаправляющее событие на функцию countClick(), доступ к которой будет осуществляться по нажатию кнопки.
Теперь давайте пройдемся по следующим строкам кода JavaScript:
< сценарий >
пусть кликает знак равно 0 ;
функция countClick ( ) {
клики знак равно клики + 1 ;
документ. селектор запросов ( '.считать' ) . textContent знак равно клики ;
}
сценарий >
В приведенной выше части кода js:
- Здесь сначала инициализируйте клики с помощью « 0 ».
- После этого объявите функцию с именем « количество кликов() ». В его определении увеличьте инициализированный « клики ' с ' 1 ». Это приведет к увеличению счетчика при каждом нажатии кнопки.
- Наконец, войдите в « охватывать ', используя элемент ' документ.querySelector() метод. Также примените « textContent », чтобы присвоить элементу span увеличенное количество кликов, о котором говорилось ранее.
Вывод будет следующим:
Функциональность увеличенного таймера при каждом щелчке можно наблюдать в приведенном выше выводе.
Подход 2: имитация клика с помощью JavaScript с помощью метода addEventListener()
“ добавить прослушиватель событий () ” выделяет элементу обработчик события. Этот метод можно реализовать, прикрепив определенное событие к элементу и предупредив пользователя о срабатывании события.
Синтаксис
элемент. addEventListener ( событие, функция )В заданном синтаксисе:
- “ мероприятие ” относится к названию события.
- “ функция ” указывает на функцию, которая будет выполняться при возникновении события.
Пример
Приведенная ниже демонстрация объясняет заявленную концепцию:
< центр >< тело >< ссылка знак равно '#' я бы знак равно 'ссылка на сайт' > Нажмите на ссылку а >
тело > центр >
< сценарий >
быть козлом знак равно документ. получитьэлементбиид ( 'ссылка на сайт' ) ;
получить. addEventListener ( 'щелкнуть' , ( ) => тревога ( «Нажмите Смоделированный!» ) )
сценарий >
В приведенном выше коде:
- Во-первых, укажите « якорь ” для включения указанной ссылки
- В части кода JavaScript перейдите к созданной ссылке, используя « документ.getElementById() метод.
- Наконец, примените « добавить прослушиватель событий () ” к доступному “ ссылка на сайт ». “ нажмите », в этом случае прилагается событие, которое приведет к предупреждению пользователя при нажатии на созданную ссылку.
Выход
Подход 3: имитация клика с помощью JavaScript с использованием метода click()
“ щелчок() » выполняет имитацию щелчка мыши по элементу. Этот метод можно использовать для имитации щелчка непосредственно на прикрепленных кнопках, как указано в названии.
Синтаксис
элемент. нажмите ( )В заданном синтаксисе:
- “ элемент ” указывает на элемент, по которому будет выполнен щелчок.
Пример
Следующий фрагмент кода объясняет заявленную концепцию:
< центр >< тело >< h3 > Вы нашли это страница полезная ? h3 >
< кнопка при нажатии знак равно 'имитация клика()' я бы знак равно 'симулировать' > Да кнопка >
< кнопка при нажатии знак равно 'имитация клика()' я бы знак равно 'симулировать' > Неа кнопка >
< идентификатор h3 знак равно 'глава' стиль знак равно 'цвет фона: светло-зеленый;' > h3 >
тело > центр >
- Во-первых, включите заявленный заголовок в « <центр> ' ярлык.
- После этого создайте две разные кнопки с указанными идентификаторами.
- Также прикрепите « по щелчку », оба из которых вызывают функцию симуляцииClick().
- На следующем шаге включите еще один заголовок с указанным « я бы ', чтобы уведомить пользователя, как только ' нажмите » моделируется.
Теперь пройдитесь по приведенным ниже строкам JavaScript:
< сценарий >функция имитации щелчка ( ) {
документ. получитьэлементбиид ( 'симулировать' ) . нажмите ( )
дай получить знак равно документ. получитьэлементбиид ( 'глава' )
получить. внутренний текст знак равно 'Нажмите Смоделированный!'
}
сценарий >
- Определить функцию имитация клика() ».
- Здесь получите доступ к созданным кнопкам, используя « документ.getElementById() ” и примените “ щелчок() метод им.
- Теперь аналогичным образом перейдите к выделенному заголовку и примените « внутренний текст », чтобы отображать указанное сообщение в виде заголовка при имитации щелчка.
Выход
В приведенном выше выводе видно, что обе созданные кнопки имитируют щелчок.
В этом блоге показано, как применить симуляцию кликов с помощью JavaScript.
Вывод
« по щелчку событие, « добавить прослушиватель событий () 'метод' или ' щелчок() ” можно использовать для имитации клика с помощью JavaScript. « по щелчку ” может применяться для имитации щелчка при каждом нажатии кнопки в виде счетчика. “ добавить прослушиватель событий () ” можно использовать для прикрепления события к ссылке и уведомления пользователя при имитации клика. “ щелчок() » может быть применен к созданным кнопкам и выполняет требуемый функционал для каждой из кнопок. В этой статье объясняется, как применить симуляцию кликов в JavaScript.