Double-Tap Catch

Some people tap faster than their browser can respond with. So they tap again. Perhaps several times.

When a link is tapped, the browser needs to fetch the new page before displaying it for the user. Sometimes the browser needs to navigate through redirects before the destination page is found.

Browsers are getting better about offering a blank page immediately after a link is tapped, which removes the link. Yet, even that may be too slow to eliminate an extra tap for particularly active users.

When you record clicks or page loads, those extra taps contaminate your data.

Today's article comes with a JavaScript function that can be used to neutralize the extra taps. You specify which links to enable with the double-tap catch.

The JavaScript takes into consideration that there may, at times, be a legitimate reason to tap a link several times. Currently, it ignores 2 taps (customizable setting) following the first. The next tap is then acted on.

Put the JavaScript on your pages. Give selected links a special onclick attribute. And you're good to go.

Example and JavaScript

The example implementation launches an alert box when the link is tapped. Then, it ignores the next two taps. The tap after that launches the alert box again.

Tap for an alert.

Below is the source code of the JavaScript. It is followed with a customization note and then an example link that uses the JavaScript.

<script type="text/javascript">
// Specify the number of taps to skip after a tap was effective.
var TapCheck_TapsToSkip = 2;
// End of customization.
var TapCheck_TapWasDone = 0;
function TapCheck_CheckFunction()
{
   TapCheck_TapWasDone++;
   if(TapCheck_TapWasDone>(TapCheck_TapsToSkip+1)) { TapCheck_TapWasDone = 1; }
   if(TapCheck_TapWasDone>1) { return false; }
   return true;
}
</script>

Customization note —

The var TapCheck_TapsToSkip = 2; line in the above JavaScript source code specifies the number of taps to ignore after one tap gets through. If you wish to change that, replace 2 with the number you prefer.

Put the JavaScript on your web page wherever JavaScript can run. Near the bottom of the page, immediately above the cancel </body> tag should work. The JavaScript can also be imported instead of the function being coded in the web page.

Enabling the Tap Check Function

To enable the tap check for a link, insert this attribute into the HTML a tag.

onclick="return TapCheck_CheckFunction()"

Here is an example.

<a 
  onclick="return TapCheck_CheckFunction()"
  href="https://www.willmaster.com/blog/javascript/external-javascript.php">
JavaScript can also be imported
</a>

Neutralizing extra taps on links can now be done.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager