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

Question

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

问题是，<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

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

现在将您的按钮绑定到（点击），然后使用阈值来查看是否可以为您的用户找到合适的平衡点。