Click event not firing on touchscreen when finger moves a bit

Click event is working fine when using mouse with computer. Even when I put mouse button down on button move cursor and then release mouse button inside button area, click event is firing. But same with touchscreen it is not working. I know that reason is that in touchscreen that kind of dragging is considered as scrolling. Click event is fired when I don’t move finger too much on button. So only down and up without moving. My client has problem that they are moving finger too much and it is too hard to get click event. Is it possible to set bigger threshold for how much finger can move that it is still considered as click and not scroll?

I found this article where touch events are handled byself and translated them to click event. http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html I would not to like to go this road.

Have you any suggestion how can I solve this?

Here is more detail about touch events https://developer.mozilla.org/en-US/docs/Web/API/Touch_events Look at Handling clicks there is described how click is working in touchscreens. Still I didn’t managed to work. Few months ago I but evt.preventDefault(); to my touchmove event handler and it did fix problem but currently it seems not.

EDIT:2019.11.5

Here is what was working earlier but no anymore:

html
<body (touchmove)="touchMoveEvent($event)"></body>

TypeScript
touchMoveEvent(ev: Event): void
{
    ev.preventDefault();
}

And here is basic angular example of button and click handler which is not working if user is moving finger too much. I haven’t check what is threshold but my I assume it is something near 10px-20px.

<button (click)="onClickEventHandler($event)">Press button</button>

onClickEventHandler(ev: Event) {
  //do the thing here
}

I have tested touchscreen functionality with chrome’s devtools toggle device toolbar.

32 thoughts on “Click event not firing on touchscreen when finger moves a bit”

Leave a Comment