How to avoid double click?

A

AstonMartin2015-01-01 08:39:55

HTML

AstonMartin, 2015-01-01 08:39:55

Good day!
Tell me, plz, in such a situation?
I have a button on the page with a link, like "Next". And there is also a code, thanks to which, the transition is carried out when you click on any point on the page. This is done so that if users miss the button, the transition will still occur (users usually come from mobile devices).
The code for this is:

<style>
    BODY.enterPage{
      cursor:hand;
    }
  </style>
 
  <script>
    function goto(){
      location.href = "domain.com/next"
    }
  </script>

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

The problem is that in some browsers, if the user clicks exactly on the button with the link, then _two_ requests actually occur, which then spoil all the statistics. It turns out that there are 1.5-2 times more clicks than there were real visitors.
What is the best way to avoid double clicks?
- how to fix the code?
- remove the link from the button? (but suddenly this code does not work in all browsers? I would not want the part to not have a transition). In general, I would not like to remove the link.
- another variant?
Thank you! And Happy New Year! )

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Andrey Khokhlov, 2015-01-01
@AstonMartin

You can check event.target in the body click event handler and make the transition only if it is a click not on a link.
You can hang a click event handler on the link and prevent the event from popping up
https://learn.javascript.ru/event-bubbling

T

teslor, 2015-01-01
@teslor

A double click can usually occur for the following reasons:
1) A handler for the same event is set for the element itself and for the container element in which it is located. In this case, the event.stopPropagation() method will help, which prevents the event from bubbling.
2) Additionally, the browser's built-in handler is triggered (in particular, when you click on a link, the browser will try to follow it). To prevent the browser from doing something by default, use the event.preventDefault() method. This method is often used in conjunction with the previous one.
3) The user makes 2 clicks in a row too quickly. In this case, you need to call the handler no earlier than a certain time after the last operation ( debounce )

D

D', 2015-01-01
@Denormalization

Standard double action protection:
Use the action flag.

<script>
    var clicked = false;
    function goto(){
      if (clicked === false) {
          clicked = true;
          location.href = "domain.com/next";
      }
    }
</script>