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

touch firing click only

Expected behavior, both events

touch firing both events

hey trevor, do you have the example you posted on http://www.trevorsimonton.com/androidissue/index.html - it looks like it's down — KyleMit, Dec 15 '20 at 23:29

score 2 · Accepted Answer · answered Jun 02 '15 at 19:14

2

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.

answered Jun 02 '15 at 19:14

David Mulder

26,123
9
51
114

I'm trying to get a desktop site to be touch friendly as a temporary fix. The client doesn't want to do a fully responsive site or a mobile site yet, they just want the desktop site to work with hover/touch events. iOS has a way of treating the first tap as hover, which expands the old dropdown nav. I'm trying to recreate this on Android. I mostly have it working, but this touch radius problem causes it to act inconsistently if you just miss the navigation element. I unfortunately need to rely on `click` here. Since this is a temporary fix, I'll probably have to say "no solution" – tmsimont Jun 08 '15 at 14:14
@tmsimont As a *temporary* solution you can just set a variable based on useragent (checking for touch support is pretty hard) and use it to either bind the touch event *or* the click event. – David Mulder Jun 08 '15 at 21:33
true.. I was hoping to support devices like my ASUS tablet where i might sometimes be using the mouse and other times be using the touch screen, too. That's why I've been avoiding that. I was hoping somebody might come in with some magic javascript that either narrows the wide radius of the touch trigger or expands the radius of touchstart... – tmsimont Jun 09 '15 at 00:24
@tmsimont Well, the thing to realize is that if you cancel the touch event the click event isn't triggered, so that's how you build proper support. But getting that /right/ is harder than it sounds (part of the reason of which is that surface windows tablets and asus android tablets both work in different ways). – David Mulder Jun 09 '15 at 00:45
yep. I ran into some huge headaches trying to support both, but I did get it working on windows touch+mouse, android and iOS.. this wide touch range is my only remaining headache. for now i had to tell the client there's no way around it unless we rebuild with the method you're describing. i suppose that's just the way it is! – tmsimont Jun 09 '15 at 01:49

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

Animation of problem

1 Answers1

The problem

The solution

The hard part