Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
2 / 2 / 0
Регистрация: 27.11.2021
Сообщений: 31

Как программно сделать клик по кнопке на сайте, чтоб выпало меню? Не получается сделать click(), как обычно

13.10.2022, 18:06. Показов 1323. Ответов 9

Студворк — интернет-сервис помощи студентам
Здравствуйте! Помогите, люди добрые! Не могу понять, куда мне копать. Сделали новый интерфейс на Алиэкспресс, а у меня была кнопка "Close", которая делала клик на всех ссылках "закрыть" и очищала мне Избранное на Али. Теперь мне поломали тот код - те ссылки "закрыть" исчезли, вместо них значок "...", при клике по которому выпадает меню, в котором там одним из пунктов "Удалить товар". И я хочу написать новый код для своей кнопки "Close" - чтобы, когда я жму на неё, то чтоб сам нажимался значок "...", чтоб само выскакивало это выпадающее меню и в нём само нажималось "Удалить товар".

И начала я получать код этого button "...", чтоб заново создать click(), в Инспекторе вот что (также прикрепила рисунок того, что в Инспекторе):
Code
1
<button type="button" class="snow-ali-kit_Button-Tertiary__button__jio9gc snow-ali-kit_Button__button__1yq34d snow-ali-kit_Button__sizeM__1yq34d snow-wishlist_SnowWishlist__moreWrap__1jadwm"><svg fill="currentColor" class="ali-icons_SvgIcon__icon__75ocax ali-icons_SvgIcon__size_M__75ocax snow-wishlist_SnowWishlist__more__1jadwm" viewBox="0 0 32 32" data-spm-anchor-id="a2g2w.favourites.mywishlist.i17.522c4aa6zaLFnZ"><path fill-rule="evenodd" d="M4.8 18.6a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6zm14-2.8a2.8 2.8 0 11-5.6 0 2.8 2.8 0 015.6 0zm11.2 0a2.8 2.8 0 11-5.6 0 2.8 2.8 0 015.6 0z" clip-rule="evenodd" data-spm-anchor-id="a2g2w.favourites.mywishlist.i19.522c4aa6zaLFnZ"></path></svg></button>

Получается, в button вложен какой-то svg, а в svg ещё вложен какой-то path.
Я пробовала в консоли сделать клик просто по button, чтоб вызвать меню у первого товара в списке:
Code
1
document.getElementsByClassName("snow-ali-kit_Button-Tertiary__button__jio9gc snow-ali-kit_Button__button__1yq34d snow-ali-kit_Button__sizeM__1yq34d snow-wishlist_SnowWishlist__moreWrap__1jadwm")[0].click();
А оно показывает просто "undefined", ничего не происходит. Смотрю - точно, нет пометки "event" у button. Зато она есть у его дочернего элемента, у svg, там должен происходить именно click и событие "Всплытие" - то, что нужно. И я тогда сделала в консоли клик для дочернего элемента:
Code
1
document.getElementsByClassName("snow-ali-kit_Button-Tertiary__button__jio9gc snow-ali-kit_Button__button__1yq34d snow-ali-kit_Button__sizeM__1yq34d snow-wishlist_SnowWishlist__moreWrap__1jadwm")[0].firstChild.click();
И вместо ожидаемого клика получила ошибку!
Code
1
Uncaught TypeError: document.getElementsByClassName(...)[0].firstChild.click is not a function
Как же так? Как это - не функция? Как тогда сделать, чтоб это была функция? Но ведь как-то этот button и svg связаны на Али и взаимодействуют, раз работают по клику мыши! Почему оно тогда у меня не работает?
Миниатюры
Как программно сделать клик по кнопке на сайте, чтоб выпало меню? Не получается сделать click(), как обычно  
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
13.10.2022, 18:06
Ответы с готовыми решениями:

Как программно сделать на кнопке меню и рисунок, и надпись?
Пожалуйста,как программно сделать на кнопке меню и рисунок, и надпись? И где взять значение параметра Id (какой код какому рисунку...

Как сделать JS click событие по всем классам на сайте?
Здравствуйте , есть JsFireEvent(webControl(), &quot;document.getElementsByClassName('class')&quot;, &quot;click&quot;); как сделать ,чтобы нажатие было по...

Как сделать,чтоб при нажатии на кнопку картинка менялась(на кнопке) ?)
C этой&lt;img src=&quot;1092.png&quot;&gt; На эту&lt;img src=&quot;7798.png&quot;&gt;

9
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3833 / 1676 / 431
Регистрация: 14.03.2022
Сообщений: 4,228
13.10.2022, 18:27
Цитата Сообщение от IrinaIU Посмотреть сообщение
Как это - не функция?
Так ты посмотри что у тебя в
JavaScript
1
document.getElementsByClassName("snow-ali-kit_Button-Tertiary__button__jio9gc snow-ali-kit_Button__button__1yq34d snow-ali-kit_Button__sizeM__1yq34d snow-wishlist_SnowWishlist__moreWrap__1jadwm")[0].firstChild
Просто выведи в консоль
0
2 / 2 / 0
Регистрация: 27.11.2021
Сообщений: 31
13.10.2022, 18:53  [ТС]
В консоли:
<svg class="ali-icons_SvgIcon__icon_…wWishlist__more__1j adwm" fill="currentColor" viewBox="0 0 32 32">

Тогда почему на Али у этого svg клик происходит?.. Не понимаю...
Миниатюры
Как программно сделать клик по кнопке на сайте, чтоб выпало меню? Не получается сделать click(), как обычно  
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3833 / 1676 / 431
Регистрация: 14.03.2022
Сообщений: 4,228
13.10.2022, 18:59
IrinaIU, ты не так смотришь "в консоли"...
Ты в своем коде напиши так
JavaScript
1
2
const o = document.getElementsByClassName("snow-ali-kit_Button-Tertiary__button__jio9gc snow-ali-kit_Button__button__1yq34d snow-ali-kit_Button__sizeM__1yq34d snow-wishlist_SnowWishlist__moreWrap__1jadwm")[0].firstChild
console.log(o)
Вот именно твой код что напишет в консоль?
0
2 / 2 / 0
Регистрация: 27.11.2021
Сообщений: 31
13.10.2022, 19:08  [ТС]
<svg class="ali-icons_SvgIcon__icon_…wWishlist__more__1j adwm" fill="currentColor" viewBox="0 0 32 32">
0
Эксперт JSЭксперт HTML/CSS
 Аватар для krvsa
3833 / 1676 / 431
Регистрация: 14.03.2022
Сообщений: 4,228
13.10.2022, 19:58
У меня ошибок не дает...
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--
-->
<style>
</style>
<script>
$(_ => {
    const o = $('.ali-icons_SvgIcon__icon_…wWishlist__more__1jadwm')
    o.click()
})
/*
document.addEventListener('DOMContentLoaded', _ => {
})
*/
</script>
</head>
<body>
<svg class="ali-icons_SvgIcon__icon_…wWishlist__more__1jadwm" fill="currentColor" viewBox="0 0 32 32" />
 
</body>
</html>
Добавлено через 2 минуты
Если так - будет аналогичная ошибка
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
    const o = document.querySelector('.ali-icons_SvgIcon__icon_…wWishlist__more__1jadwm')
    o.click()
})
</script>
</head>
<body>
<svg class="ali-icons_SvgIcon__icon_…wWishlist__more__1jadwm" fill="currentColor" viewBox="0 0 32 32" />
 
</body>
</html>
Видать svg не особо "кликабельный" элемент...

Добавлено через 21 минуту
IrinaIU, вот если событие на svg "диспачить" - работает
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
    const o = document.querySelector('.ali-icons_SvgIcon__icon_…wWishlist__more__1jadwm')
    o.addEventListener('click', _ => {
        alert('Ok')
    })
    const e = new Event('click')
    o.dispatchEvent(e)
})
</script>
</head>
<body>
<svg class="ali-icons_SvgIcon__icon_…wWishlist__more__1jadwm" fill="currentColor" viewBox="0 0 32 32"></svg>
 
</body>
</html>
2
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
13.10.2022, 20:02
Да, это всё оттого что у SVG элементов нет метода .click(), он есть только у HTML элементов.
2
2 / 2 / 0
Регистрация: 27.11.2021
Сообщений: 31
15.10.2022, 17:17  [ТС]
Ломаю-ломаю голову и не могу понять, что не так... Мне надо с помощью плагина Code Injector на Firefox встроить свой скрипт в избранное Алиэкспресс, на страницу https://my.aliexpress.ru. Спасибо, я не знала про метод dispatchevent! Я так поняла, dispatch нужен, чтоб имитировать click(), чтоб вызвать какое-то своё событие, например, выдать собственное сообщение. А мне нужно, чтоб при имитации клика выполнялось то действие, что в оригинале - чтоб всплывало настоящее меню Алиэкспресс. Код сработает только на странице Избранного Али. Я смотрю в отладчике, надо, чтоб запустилась функция с Али из их скрипта https://st.aliexpress.ru/mixer... .17.0.1.js, какая-то функция jr() {}

В плагине в секции html подключаю скрипт:
HTML5
1
<script src="https://st.aliexpress.ru/mixer/ssr/1/aer-assets/ext/react-dom.17.0.1.js"></script>
В секции js пишу функцию для своей кнопки "Close":
JavaScript
1
2
3
4
5
6
7
8
9
10
function closebtn() {
    var o = document.getElementsByClassName("ali-icons_SvgIcon__icon__75ocax ali-icons_SvgIcon__size_M__75ocax snow-wishlist_SnowWishlist__more__1jadwm")[0];
    o.addEventListener('click', _ => {
        alert('ok');
        jr();
    });
    var e = new Event('click');
    o.dispatchEvent(e);
}
btn6.onclick = closebtn;
Жму на кнопку Close, появляется alert (сообщение "ok"), а меню Алиэкспресса не появляется, а в консоли ошибка: "Uncaught ReferenceError: jr is not defined".

Попробовала по-другому. Открываю страницу с Избранным в Али, открываю консоль, подключаю в консоли этот скрипт по аналогии с инструкцией, как подгрузить JQuery через консоль, только вместо этого подгружаю скрипт с Али:
Code
1
2
3
var jq = document.createElement('script');
jq.src = "https://st.aliexpress.ru/mixer/ssr/1/aer-assets/ext/react-dom.17.0.1.js";
document.getElementsByTagName('head')[0].appendChild(jq);
После чего в консоли запускаю это jr() и получаю сообщение "Uncaught ReferenceError: jr is not defined". Что я делаю не так?
0
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
15.10.2022, 19:36
Лучший ответ Сообщение было отмечено IrinaIU как решение

Решение

IrinaIU,

JavaScript
1
2
3
4
5
6
7
8
9
const o = document.querySelector(
  'svg.ali-icons_SvgIcon__icon__75ocax.snow-wishlist_SnowWishlist__more__1jadwm'
);
 
const e = new Event('click', {
  bubbles: true, // всплытие; https://learn.javascript.ru/dispatch-events#itogo
});
 
o.dispatchEvent(e);
Ну, а дальше уже делайте что хотите с этим элементом.

Кстати, можно пойти по немного другому пути. В конечно итоге всех этих манипуляций (нажатие на пункты меню) — происходит запрос на сервер и удаление товара. Этим можно воспользоваться.

Берем со страницы все идентификаторы товаров, их группу принадлежности к списку, тип товара и самостоятельно отправляет запрос на удаление. Если в ответ с сервера приходит JSON с ключом и значением success: true, удаляем элемент со страницы. Ну, это как альтернативный способ.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let productList = document.querySelectorAll(
  '.snow-wishlist_ProductSnippet__container__1bz3dm'
);
 
for (const product of productList) {
  let currentGroupId = new URLSearchParams(window.location.search).get(
    'currentGroupId'
  );
 
  fetch('https://my.aliexpress.ru/aer-api/v2/bx/wishlist/items/delete', {
    method: 'POST',
    body: JSON.stringify({
      itemId: Number(product.getAttribute('ae_object_value')),
      groupId: currentGroupId == '0' ? -1 : Number(currentGroupId),
      itemType: product.getAttribute('ae_object_type'),
    }),
  }).then(async (response) => {
    let parcel = await response.json();
 
    if (parcel.data.success) {
      product.remove();
    }
  });
}
Протестировано в этом Вашем инжекторе.
3
2 / 2 / 0
Регистрация: 27.11.2021
Сообщений: 31
17.10.2022, 23:01  [ТС]
evikza, добрый вечер! Спасибо огромное, очень выручили, помог именно Ваш второй способ! Как вставила этот код к себе в инжектор, так сразу по кнопке "Закрыть" товары стали удаляться!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
17.10.2022, 23:01
Помогаю со студенческими работами здесь

Как через AutoIt заполнить поле поиска google и сделать клик по кнопке поиск
AutoItSetOption('MouseCoordMode', 0) ShellExecute('chrome.exe', 'https://www.google.ru/') WinWaitActive(&quot;Google - Google Chrome&quot;) ...

как сделать чтоб картинка увеличивалас а вокруг все тамнело как на этом сайте
как сделать чтоб картинка увеличивалас а вокруг все тамнело как на этом сайте

Как сделать программный клик на сайте по заданному слову?
С# - Как сделать программный клик на сайте по заданному слову?

Как программно сделать, чтоб приложение никогда не сворачивалось?
Как программно сделать, чтоб приложение никогда не сворачивалось, даже при комбинации Win+D(сворачиваются все окна)?

как сделать,чтоб виджет исчезал после авторизации на сайте
можно ли,как-нибудь сделать так,что бы после авторизации на сайте,виджет исчезал. У меня есть виджет для входа или регистрации на сайте,и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru