当手指移动一点时，点击事件不会在触摸屏上触发答案

【问题标题】：Click event not firing on touchscreen when finger moves a bit当手指移动一点时，点击事件不会在触摸屏上触发
【发布时间】：2019-10-29 16:06:37
【问题描述】：

在计算机上使用鼠标时，单击事件可以正常工作。即使我将鼠标按钮放在按钮移动光标上，然后在按钮区域内释放鼠标按钮，点击事件也会触发。但与触摸屏相同，它不起作用。我知道原因是在触摸屏中，这种拖动被视为滚动。当我没有在按钮上移动太多手指时会触发 Click 事件。所以只能上下不动。我的客户遇到的问题是他们移动手指太多并且很难获得点击事件。是否可以为手指可以移动多少设置更大的阈值，它仍然被认为是点击而不是滚动？

我发现这篇文章中触摸事件由自己处理并将它们翻译为点击事件。 http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html我不想走这条路。

您有什么建议可以解决这个问题吗？

这里有更多关于触摸事件的详细信息https://developer.mozilla.org/en-US/docs/Web/API/Touch_events 查看处理点击，其中描述了点击在触摸屏中的工作方式。仍然我没有设法工作。几个月前，我向我的 touchmove 事件处理程序发送了evt.preventDefault();，它确实解决了问题，但目前似乎没有。

编辑：2019.11.5

这是之前有效但不再有效的方法：

html
<body (touchmove)="touchMoveEvent($event)"></body>

TypeScript
touchMoveEvent(ev: Event): void
{
    ev.preventDefault();
}

这里是按钮和单击处理程序的基本角度示例，如果用户移动手指过多，则该处理程序不起作用。我没有检查什么是阈值，但我认为它接近 10px-20px。

<button (click)="onClickEventHandler($event)">Press button</button>

onClickEventHandler(ev: Event) {
  //do the thing here
}

我已经使用 chrome 的 devtools 切换设备工具栏测试了触摸屏功能。

【问题讨论】：

请添加您的代码
解决了吗？如果没有请添加代码
不，还没有解决。稍后我会在我的电脑上添加一些代码。

标签： javascript angular onclick touchscreen

【解决方案1】：

这是一个不错的解决方案。通过使用touchstart 和touchend 事件，您可以测量两个点之间的距离，如果事件接近（以像素为单位）则触发点击事件。阅读我的 cmets。

    class ScrollToClick {
        constructor(elem, maxDistance = 20) {
            this.elem = elem;
            this.start = null;
            this.maxDistance = maxDistance;

            // Bind the touches event to the element
            this.bindTouchEvents();
        }

        bindTouchEvents() {
            this.elem.addEventListener('touchstart', this.onTouchStart.bind(this), false);
            this.elem.addEventListener('touchend', this.onTouchEnd.bind(this), false);
        }

        onTouchStart(e) {
            // hold the touch start position
            this.start = e.touches[0];

            // clear the position after 2000 mil (could be set for less).
            setTimeout(() => { this.start = null; }, 2000);
        }

        onTouchEnd(e) {
            // if the timeout was called, there will be no start position
            if (!this.start) { return; }

            // calculate the distance between start and end position
            const end = e.changedTouches[0],
                dx = Math.pow(this.start.pageX - end.pageX, 2),
                dy = Math.pow(this.start.pageY - end.pageY, 2),
                distance = Math.round(Math.sqrt(dx + dy));

            // if the distance is fairly small, fire
            // a click event. (default is 20 but you can override it through the constructor)
            if (distance <= this.maxDistance) {
                this.elem.click();
            }

            // clear the start position again
            this.start = null;
        }
    }

然后你可以将它与任何元素一起使用：

// use any element you wish (here I'm using the body)
const elem = document.body;

// initialize the class with the given element
new ScrollToClick(elem);

// listen to a click event on this element.
elem.addEventListener('click', (e) => {
    console.log('Clicked');
})

【讨论】：

如果我有空闲时间，我明天在工作中试试这个。这是否也适用于子元素并影响子元素？因此，如果我在正文中有按钮，如果我使用正文作为此类的输入参数，这是否也会影响到按钮？
@JanneHarju 可以将按钮元素传递给构造函数
我可以使用这种解决方案，但已转换为 Angular 指令。我稍后会粘贴我的解决方案。

【解决方案2】：

这是一个看起来很相似的GitHub Issue。我不是 JS 开发人员，所以我不确定，但希望这会有所帮助。

【讨论】：

【解决方案3】：

我的最终解决方案在这里。我忘了在文本中提到我正在使用 Angular，尽管我在标签中。

所以我做了 Angular 指令，但在 AfikDeri 的建议中，它与指令样式代码非常接近。

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[touchClick]'
})
export class TouchClickDirective implements OnInit {
  @Input() maxDistance = 100;
  @Input() maxTime = 2000;

  @Input() touchClick: boolean;
  start: Touch;
  constructor(private elem: ElementRef) {
    this.start = null;
  }
  ngOnInit(): void {
    // Bind the touches event to the element
    this.bindTouchEvents();
  }
  bindTouchEvents() {
    this.elem.nativeElement.addEventListener('touchstart', this.onTouchStart.bind(this), false);
    this.elem.nativeElement.addEventListener('touchend', this.onTouchEnd.bind(this), false);
  }

  onTouchStart(e: TouchEvent) {
    // hold the touch start position
    this.start = e.touches[0];

    // clear the position after 2000 mil (could be set for less).
    setTimeout(() => {
      this.start = null;
    }, this.maxTime);
  }

  onTouchEnd(e: TouchEvent) {
    // if the timeout was called, there will be no start position
    if (!this.start) {
      return;
    }

    // calculate the distance between start and end position
    const end = e.changedTouches[0],
      dx = Math.pow(this.start.pageX - end.pageX, 2),
      dy = Math.pow(this.start.pageY - end.pageY, 2),
      distance = Math.round(Math.sqrt(dx + dy));

    // if the distance is fairly small, fire
    // a click event. (default is 20 but you can override it through the constructor)
    if (distance <= this.maxDistance) {
      this.elem.nativeElement.click();
    }

    // clear the start position again
    this.start = null;
  }
}

下面是它的使用方法

<button mat-flat-button [touchClick] [maxDistance]="100" [maxTime]="300" (click)="doWarning()">
  Generate Warning
</button>

【讨论】：

【解决方案4】：

我仅根据在不同事件侦听器上设置的外部值状态来快速解决此问题。如果 moveState 变量不会被 touchmove 事件改变值，则 Btn click fn 将在 touchend 事件上触发。触摸启动始终处于重置状态。

const moveState = false;

btn.addEventListener("click", (e) => handleBtnClick(e));
btn.addEventListener("touchstart", (e) => handleBtnTouchStart(e));
btn.addEventListener("touchmove", (e) => handleBtnTouchMove(e));
btn.addEventListener("touchend", (e) => handleBtnClick(e));

function handleHotspotTouchStart(e){
  moveState = false;
}
function handleHotspotTouchMove(e){
  moveState = true;
}
function handleBtnClick(e){
  e.preventDefault;
  if(e.type === 'touchend'){
    if(moveState) return;
  }
  // trigger btn click action for both cursor click and touch if no movement detected
  btnClick();
}

【讨论】：