Задать вопрос
@AstonMartin
html

Как избежать двойного клика?

Доброго дня!

Подскажите, плз, в такой ситуации?
У меня на странице есть кнопка со ссылкой, типа "Дальше". И так же есть код, благодаря которому, переход дальше осуществляется при нажатии на любую точку страницы. Это сделано для того, чтобы если юзеры промахиваются по кнопке, то все равно происходил переход (юзеры обычно заходят с мобильных устройств).
Код для этого такой:
<style>
    BODY.enterPage{
      cursor:hand;
    }
  </style>
 
  <script>
    function goto(){
      location.href = "domain.com/next"
    }
  </script>

<body class="enterPage" onclick="goto();">


Проблема в том, что в некоторых браузерах если юзер кликает именно по кнопке со ссылкой, то реально происходит _два_ запроса, которые потом портят всю статистику. Получается, что переходов становится в 1,5-2 раза больше, чем было реальных посетителей.

Подскажите, как лучше избежать двойных кликов?
- как-то поправить код?
- убрать ссылку с кнопки? (но вдруг этот код срабатывает не во всех браузерах? Не хотелось бы чтобы у части не происходило перехода). Вообщем, не хотелось бы убирать ссылку.
- другой вариант?

Спасибо! И с наступившим Новым годом! )
  • Вопрос задан
  • 9714 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
andrhohlov
@andrhohlov
Можно в обработчике события клика на body проверять event.target и совершать переход только если это клик не по ссылке.

Можно на ссылку повесить обрабочик события клика и запретить событию всплывать
https://learn.javascript.ru/event-bubbling
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@teslor
Двойной клик обычно может происходить по следующим причинам:
1) Задан обработчик на одно и то же событие у самого элемента и у элемента-контейнера, в котором он находится. В этом случае поможет метод event.stopPropagation(), который предотвращает всплытие события.
2) Дополнительно срабатывает встроенный обработчик браузера (в частности, при клике по ссылке браузер попытается по ней перейти). Чтобы запретить браузеру делать какие-то действия по умолчанию, используйте метод event.preventDefault(). Этот метод часто используется совместно с предыдущим.
3) Пользователь слишком быстро делает подряд 2 клика. В этом случае нужно вызывать обработчик не ранее чем через определенное время после последнего срабатывания (debounce)
Ответ написан
Комментировать
Комментировать
Denormalization
@Denormalization
Стандартная защита от двойных действий:
Использовать флаг о совершении действия.

<script>
    var clicked = false;
    function goto(){
      if (clicked === false) {
          clicked = true;
          location.href = "domain.com/next";
      }
    }
</script>
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Вычислить размер объекта по карте глубин
25 апр. 2024, в 07:37
5000 руб./за проект
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Ещё заказы