Задать вопрос
@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 раза больше, чем было реальных посетителей.

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

Спасибо! И с наступившим Новым годом! )
  • Вопрос задан
  • 10111 просмотров
Комментировать
Подписаться 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 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
На сайте на modx сделать три задачи
22 нояб. 2024, в 13:15
3000 руб./за проект
Убрать ошибку settings.php при входе в админку Битрикс 1с
22 нояб. 2024, в 13:09
500 руб./за проект
Разработать дизайн сайта
22 нояб. 2024, в 12:53
25000 руб./за проект
Ещё заказы