当手指稍微移动时，点击事件不会在触摸屏上触发

Question

在计算机上使用鼠标时，点击事件工作正常。即使当我将鼠标按钮放在按钮移动光标上然后在按钮区域内释放鼠标按钮时，单击事件也会触发。但与触摸屏一样，它不起作用。我知道原因是在触摸屏中，这种拖动被认为是滚动。当我没有在按钮上移动太多手指时，将触发 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 查看 Handling clicks 那里描述了点击在触摸屏中是如何工作的。我仍然没有设法工作。几个月前，我 evt.preventDefault(); 到我的 touchmove 事件处理程序，它确实解决了问题，但目前似乎没有。

编辑：2019.11.5

这是之前有效但现在无效的方法：

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

Answer 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>

Answer 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();
}

当手指稍微移动时，点击事件不会在触摸屏上触发

Click event not firing on touchscreen when finger moves a bit

javascript

touchscreen

onclick

angular