使用滑动动作“绘制”表格单元格答案

【问题标题】："Paint" table cells using swipe movements使用滑动动作“绘制”表格单元格
【发布时间】：2021-08-24 12:36:03
【问题描述】：

我在一个角度组件中有一系列单元格：

<table>
  <thead role="rowgroup">
    <tr><th>M</th><th>T</th><th>O</th><th>T</th><th>F</th><th>L</th><th>S</th></tr>
  </thead>
  <tbody #body appSwipePaint>
    <tr *ngFor="let week of weeks" role="rowgroup">
      <td *ngFor="let day of week">
        <ng-container *ngIf="!!day.fromMs">
          <div (click)="book(day)" class="day">
            {{ day.fromMs | date: 'dd' }}
          </div>
        </ng-container>
      </td>
    </tr>
  </tbody>
</table>

我的组件如下所示：

我希望我的用户能够触摸一个日期并滑动以标记多个日期。我已经创建了一个要附加到我的 tbody 的指令来执行此操作：

@Directive({selector: '[appSwipePaint]'})
export class SwipePaintDirective {
  private isPainting = false;
  private days: HTMLElement[] = [];

  constructor(private el: ElementRef) {
    this.el.nativeElement.addEventListener('pointerdown', (evt: PointerEvent) => this.touchStart(evt));
    this.el.nativeElement.addEventListener('pointermove', (evt: PointerEvent) => this.touchMove(evt));
    this.el.nativeElement.addEventListener('pointerup', (evt: PointerEvent) => this.touchEnd(evt));
  }

  touchStart($event: PointerEvent) {
    this.isPainting = true;
  }

  touchMove($event: PointerEvent) {
    const el = document.elementFromPoint($event.x, $event.y) as HTMLElement;
    if (this.isPainting && !this.days.includes(el)) {
      this.days.push(el);
      el.click();
    }
  }

  touchEnd($event: PointerEvent) {
    this.isPainting = false;
    this.days = [];
  }
}

这在桌面上运行良好。只要按下鼠标按钮，浏览器就会检测到 PointerEvent 进入了我指向的每个单元格。

但是，当我使用 移动设备 测试页面时，或在 chrome 开发工具中使用模拟触摸事件时，PointerEvents 只会检测到报告触摸开始的单元格内的触摸开始和触摸移动。当我将触摸点移到单元格外时，它将不再检测到。

这是为什么呢？我做错了什么？

Stackblitz example of my code

【问题讨论】：

标签： javascript html angular touch

【解决方案1】：

解决方案很简单，但一点也不直观。这里提到过：`pointermove` event not working with touch. Why not?

将touch-action: none; 添加到容器元素，在本例中为tbody td。

Revised stackblitz solution.

【讨论】：