Why does Android click area have a wider radius than touchstart? How can I make it consistent?

Question

I have a simple rectangular anchor tag. I used jQuery to respond to click and touchstart events with the following:

  $(document).ready(function() {
      $("#button").on("click touchstart", function(e) {
          $("#log").append(e.type + "<br/>");
      });
  });

The HTML looks like this:

<div id="wrapper">
  <a id="button" href="#">&nbsp;</a>
</div>
<div id="log">Log:<br></div>

The CSS is simple:

  #wrapper {
      padding:50px;
  }
  #button {
      display:block;
      width:200px;
      height:40px;
      text-decoration:none;
      color:#333;
      background-color:#efefef;
      border:0px;
      padding:0px;
      margin:0px;
  }

I built this as a demo to show the problem I'm talking about.

When you tap the edge of the rectangular anchor, only the click event is fired. When you tap the center of the area, both click and touchstart are fired.

Why is it that only click seems to be triggered with the fat-finger detection? Is there a way to make the touchstart event also work with fat fingers?

---

Animation of problem

Only click is fired on edge tap

Expected behavior, both events

Answer 1

The problem

The click event on touch devices is meant to emulate a click based on tapping. There was a big problem here, because touch interfaces are significantly different from desktop interfaces. The biggest difference? Mouse clicks are a lot more precise than finger touches. To ensure that desktop sites and applications would at least be somewhat useful the behaviour you're observing was designed. That way a user on a mobile phone would still be capable of clicking a small link, even though his fingers are actually too imprecise to accurately click the link.

The solution

You aren't going to like this, but the solution is simply not to use click events on touchscreen devices. This is typically not done because the click event is actually triggered around 300ms after the touchEnd event and thus feels laggy either way (the delay is there to wait for a double tap) and now you have another reason to not use it.

The hard part

Devices that have both a touchscreen and a mouse. Your choice whether you want to bother with those. Personally I tend to just go with them emulating clicks and living with the extra lag whilst using touch events on mobile devices, but if you take the time you can create far more carefully crafted solutions probably.