Question

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

我发现本文是由触摸事件自行处理的，并将其转换为单击事件。 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切换设备工具栏测试了触摸屏功能。

Answer 1

这是一个很好的解决方案。通过使用touchstart和touchend事件，您可以测量两个点之间的距离，并在事件关闭时触发Click事件（以像素为单位）。阅读我的评论。

    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 事件更改值，则将在touchend 事件上触发Btn click fn。触摸启动始终处于重置状态。

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

手指稍微移动一下，点击事件就不会在触摸屏上触发

4 个答案: