Ionic 4 - 平板电脑上的点击与触摸启动（点击/移动配置问题）

Question

我们开发了一个安装在安卓平板电脑上的 POS（销售点）中的 Ionic 4 应用程序。

问题是，<ion-button (click)="doSomething">事件通常无法识别，因为用户站在平板电脑前面，平板电脑非常低并且没有发出干净的点击，但是一个非常小的水平移动，离子似乎将其识别为（触摸）移动。这种情况在廉价的三星 Tab A 和三星 Tab S3 上都经常发生。

该按钮实际上会像触摸一样改变它的颜色，但它不会触发。这不会发生在 android 键盘上，所以键盘上的按钮似乎更能容忍小动作。

我们尝试了很多组合，例如

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

唯一有效的是最后一个。（自然不能在元素列表中使用，因为它会阻止滚动，但我们可以接受）。

现在我认为这是一个有点肮脏的解决方法。有没有更好的解决方案来解决这个问题，比如配置按钮内移动的容差？（事实上​​，只要我的手指停留在按钮区域，我就想识别点击，这就是它在角键盘上的工作方式）。

欢迎任何建议。

顺便说一句：我不记得在 Ionic 3 上有这么严重的问题，但我可能是错的。

Answer 1

尝试这种方法来微调“tap”的灵敏度：

如果您使用的是 Angular 6+ (Ionic 4) 而不是 Angular < 5.2（其中 Hammerjs 是浏览器模块的一部分），请在 main.ts 中导入 Hammerjs：

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 }
    ]
  ],

现在将您的按钮绑定到（点击），然后调整阈值，看看是否能为用户找到合适的平衡点。