Ionic 4 - click vs touchstart on tablets (problems with click / move configuration)

Question

We develop an Ionic 4 app that is installed in POS (point of sales) on an android tablet.

Problem is, that <ion-button (click)="doSomething"> events often get not recognised because the user stands in front of the tablet which is quite low and doesn't do a clean click, but a very small horizontal movement which ionic seems to recognise as (touch)move. This happens heavily on a cheap Samsung Tab A but also on a Samsung Tab S3.

The button actually changes it's color like touched, but it doesn't fire. This doesn't happn on the android keyboard, so the buttons on the keyboard seem more tolerant to small movements.

We have tried many combinations like

(click) tappable
tap
(click) (touchmove)
(clik) (tap)
(tap) 
(click) (touchstart)
(touchmove)
(touchstart)

The only one working is the last one. (Which can not be used in a list of elements naturally because it prevents scroll, but we can live with that).

Now I think this is a somehow dirty workaround. Is there any better solution to this issue, like configuring the tolerance of movements within a button? (In fact I would like to recognise the click as long as my finger stays in the button area, that's how it works with the angular keyboard).

Any suggestions welcome.

BTW: I can't remember having this problem so heavily on Ionic 3, but I might be wrong.

Did you try looking into extending and overriding Hammer config? I had a problem with long press on hyper sensitive galaxy note, fixed it this way but i am unsure if (click) has any overridable options like allowed thresholds etc. but tap should be in thete — Sergey Rudenko, Feb 21 '19 at 14:32
See here options in tap: http://hammerjs.github.io/recognizer-tap/ — Sergey Rudenko, Feb 21 '19 at 14:37

Sergey Rudenko · Accepted Answer · 2019-06-05T01:17:59.300

3

Try this approach to fine tune sensitivity of the "tap":

Import hammerjs in main.ts if you are using Angular 6+ (Ionic 4) and not Angular < 5.2 (where hammerjs is part of browser module):

import "hammerjs";

Create a hammer.config.ts provider:

import { Injectable } from '@angular/core';
import { HammerGestureConfig } from '@angular/platform-browser';

@Injectable()
export class MyHammerGestureConfig extends HammerGestureConfig  {
  overrides = <any> {
      'tap': { threshold: 50, posTreshold: 2, time: 2000 } // default 2, 10
      'pan': { threshold: 60, posTreshold: 2 } // default 2, 10
  };
};

In your app.module.ts do the following:

..
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { MyHammerGestureConfig } from '../providers/hammer.config';

..
providers: [
    ..
    [
      { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerGestureConfig }
    ]
  ],

Now bind your button to (tap) and then play with the thresholds to see if you can find the right balance for your users.

edited Jun 05 '19 at 01:17

answered Feb 21 '19 at 15:18

Sergey Rudenko

8,809
2
24
51

2

Great! Thanks! We made it work adding ```import 'hammerjs'``` as described in https://forum.ionicframework.com/t/solved-ionic-4-press-tap-events/144385. We have configured ```tap: { threshold: 100, posTreshold: 10 }.``` for our use case – chris08002 Feb 26 '19 at 23:46
We actually had to add a time increase to the tap and most importantly we had to increase the pan threshold, otherwise the tap still gets recognised as pan: `tap: { threshold: 70, posTreshold: 10, time: 2500 }, pan: { threshold: 1000 },` – chris08002 Mar 24 '19 at 21:29
btw do you have to explicitly import hammer.js? into main.ts – Sergey Rudenko Mar 26 '19 at 00:41
it didn't work for us without it, but I am not sure if that was due to another mistake – chris08002 Mar 27 '19 at 09:41
1

just learned that in Angular 5.2 and below in some versions hammerjs was part of browser module hence there was no need to import it. Starting Angular 6 and above one has to import it explicitly. – Sergey Rudenko Jun 05 '19 at 01:17

Ionic 4 - click vs touchstart on tablets (problems with click / move configuration)

1 Answers1