Ionic 4 - щелчок против сенсорного запуска на планшетах (проблемы с конфигурацией щелчка / перемещения)

Question

Мы разрабатываем приложение Ionic 4, которое устанавливается в POS (точка продаж) на планшете Android.

Проблема в том, что <ion-button (click)="doSomething"> события часто не распознаются, потому что пользователь стоит передпланшет, который довольно низок и не делает чистый щелчок, но очень маленькое горизонтальное движение, которое ионный, кажется, распознает как (касание) движение.Это происходит в значительной степени как на дешевом Samsung Tab A, так и на Samsung Tab S3.

Кнопка на самом деле меняет свой цвет, как на ощупь, но не срабатывает.Это не устраивает андроид-клавиатуру, поэтому кнопки на клавиатуре кажутся более терпимыми к маленьким движениям.

Мы пробовали много комбинаций, таких как

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

.последний.(Который не может быть использован в списке элементов, естественно, потому что он предотвращает прокрутку, но мы можем жить с этим).

Теперь я думаю, что это несколько грязный обходной путь.Есть ли лучшее решение этой проблемы, например, настройка допуска движения внутри кнопки?(На самом деле я хотел бы распознавать щелчок, пока мой палец остается в области кнопок, вот как он работает с угловой клавиатурой).

Любые предложения приветствуются.

Кстати: яя не могу вспомнить, чтобы эта проблема была так сильно на Ionic 3, но я могу ошибаться.

Answer 1

Попробуйте этот подход для точной настройки чувствительности «tap»:

Импортируйте hammerjs в main.ts, если вы используете Angular 6+ (Ionic 4), а не Angular <5.2 (где hammerjs является частьюмодуль браузера): </p>

import "hammerjs";

Создание провайдера hammer.config.ts:

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
  };
};

В вашем app.module.ts выполните следующие действия:

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

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

Теперь свяжите свою кнопку (нажмите) и затем поиграйте с пороговыми значениями, чтобы увидеть, сможете ли вы найти правильный баланс для своих пользователей.