Почему при клике на кастомную кнопку “Скачать” не происходит переход хотя JS-обработчик отрабатывает. Как решить?
По вводным: столкнулся со странным поведением при работе с кастомной кнопкой для скачивания.
По вводным: у меня есть элемент, который визуально выглядит как<button>, но реализован через<a>Со стилями.
Сейчас ситуация такая: при клике на десктопе всё работает, а на мобильных устройствах (Android Chrome) иногда не происходит переход — только после второго нажатия.
Проверял разные варианты:
<button onclick="window.location.href='example.com'">Скачать</button>И
<a href="example.com" class="btn" onclick="return true;">Скачать</a>По вводным: подозреваю, что дело в preventDefault() где-то выше по дереву или особенностях тач-событий.
По вводным: как правильно реализовать кликабельную “кнопку-ссылку”, которая:
- По вводным: работает на всех мобильных браузерах,
- Не теряет стили кнопки,
- Нужно понять: не блокируется JS-обработчиками событий родителя?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если обработчик клика срабатывает, а переход по кастомной кнопке на мобильном происходит только со второго нажатия, почти всегда проблема не в самом
href, а в слое поверх ссылки, фокусе, hover-состоянии или конфликте междуtouchstartиclick. На Android Chrome это часто проявляется, когда элемент выглядит как кнопка, но внутри или поверх него есть вложенный блок, псевдоэлемент, анимация или обработчик, который делаетpreventDefault().Самый надёжный вариант: если это ссылка для скачивания, оставьте именно ссылку, а не кнопку с ручным переходом:
<a class="download-button" href="/files/report.pdf" download>Скачать</a>
Если нужно выполнить аналитику перед переходом, не отменяйте действие ссылки. Лучше повесьте обработчик и дайте браузеру самому открыть адрес:
document.querySelectorAll('.download-button').forEach(function (link) { link.addEventListener('click', function () { if (window.ym) { ym(83328046, 'reachGoal', 'download_click'); } }); });document.querySelectorAll('.download-button').forEach(function (link) { link.addEventListener('click', function () { if (window.ym) { ym(83328046, 'reachGoal', 'download_click'); } }); });
Проверьте CSS. Частые причины второго клика:
::beforeили::afterлежит поверх ссылки;pointer-events,transformили абсолютное позиционирование;event.preventDefault(), но переход потом выполняется не всегда.Для псевдоэлементов можно явно отключить перехват клика:
.download-button::before, .download-button::after { pointer-events: none; }
Итог: для скачивания используйте нормальный
<a href>, не заменяйте его наwindow.location.hrefбез необходимости, уберитеpreventDefault()и проверьте, что поверх ссылки нет декоративного слоя. Тогда переход будет с первого касания и на десктопе, и на мобильных.