При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?

Question

[Gosha04ye]

Столкнулся со странным поведением при работе с кастомной кнопкой для скачивания.
У меня есть элемент, который визуально выглядит как <button>, но реализован через <a> со стилями.
При клике на десктопе всё работает, а на мобильных устройствах (Android Chrome) иногда не происходит переход — только после второго нажатия.
Пробовал разные варианты:

<button onclick="window.location.href='example.com'">Скачать</button>

и

<a href="example.com" class="btn" onclick="return true;">Скачать</a>

Подозреваю, что дело в preventDefault() где-то выше по дереву или особенностях тач-событий.
Как правильно реализовать кликабельную “кнопку-ссылку”, которая:

1. работает на всех мобильных браузерах,
   
2. не теряет стили кнопки,
   
3. не блокируется JS-обработчиками событий родителя?
   

Comments

[VoidVolker]

Gosha04ye минимальный код в песочнице воспроизводящий проблему в студию.

Answer 1

[Gromov21]

Это типичная особенность мобильных браузеров: onclick на не всегда срабатывает стабильно, особенно если нет формы или контекста события.

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

Пример:

<a href="https://site.ru" class="btn"> Скачать</a>

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.btn:hover {
  opacity: 0.9;
}

Такая реализация работает стабильно на всех устройствах, включая Android и iOS. Вот как выглядит подобная кнопка “вживую” - музыка на звонок скачать бесплатно.