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

Question

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

问题是，<ion-button (click)="doSomething"> 事件经常得不到识别，因为用户站在平板电脑前，平板电脑的高度很低，不会进行干净的点击，但 ionic 看起来的水平移动非常小识别为（触摸）移动。这种情况在廉价的 Samsung Tab A 和 Samsung Tab S3 上很常见。

按钮实际上改变了它的颜色，就像被触摸一样，但它没有触发。这在 android 键盘上没有发生，因此键盘上的按钮似乎更能容忍小动作。

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

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

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

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

欢迎提出任何建议。

顺便说一句：我不记得这个问题在 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 }
    ]
  ],

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

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

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

click

button

touchstart

angular

ionic4