角度 7 中的 ipad 双击和长按事件

Question

我们如何在 angular 7 中以正确的方式为 ipad 实现双击和长按事件。

我使用指令对上述功能进行了自定义实现。但问题是它正在扼杀滚动功能。

我已经在hammerJS 中搜索了相应的事件，但找不到。

长按指令

 import { Directive, Input, Output, EventEmitter, HostListener, HostBinding } from '@angular/core';
    import { DataService } from '../services/data.service';

    @Directive({
     selector: '[appLongPress]'
     })
    export class LongPressDirective {

    @Input() duration: number = 1500;

    @Output() onLongPress: EventEmitter<any>  = new EventEmitter<any>();
    @Output() onLongPressing: EventEmitter<any>  = new EventEmitter<any>();
    @Output() onLongPressEnd: EventEmitter<any>  = new EventEmitter<any>();

    private pressing: boolean;
    private longPressing: boolean;
    private timeout: any;
    private mouseX:number = 0;
    private mouseY: number= 0;

    constructor(private dataService: DataService) { }

    @HostBinding('class.press')
  get press() { return this.pressing; }

  @HostBinding('class.longpress')
  get longPress() { return this.longPressing; }

  @HostListener('touchstart', ['$event'])
  onTouchStart(event) {
    this.pressing = true;
    this.longPressing = false;
    this.timeout = setTimeout(() => {
      this.longPressing = true;
      // Passing coordinates of the long tapped position
      this.mouseX = event.clientX;
      this.mouseY = event.clientY;
      this.onLongPress.emit(event);
      this.dataService.publishCoordinates({x: this.mouseX, y: this.mouseY});
      this.loop(event);
    }, this.duration);

    this.loop(event);
  }

  @HostListener('mousedown', ['$event'])
  onMouseDown(event) {
    // don't do right/middle clicks
    if(event.which !== 1) {
      return;
    }

    this.mouseX = event.clientX;
    this.mouseY = event.clientY;

    this.pressing = true;
    this.longPressing = false;

    this.timeout = setTimeout(() => {
      this.longPressing = true;
      this.mouseX = event.clientX;
      this.mouseY = event.clientY;
      this.onLongPress.emit(event);
      this.dataService.publishCoordinates({x: this.mouseX, y: this.mouseY});
      this.loop(event);
    }, this.duration);

    this.loop(event);
  }

  loop(event) {
    if(this.longPressing) {
      this.timeout = setTimeout(() => {
        this.onLongPressing.emit(event);
      }, 50);
    }
  }

  endPress() {
    clearTimeout(this.timeout);
    this.longPressing = false;
    this.pressing = false;
    this.onLongPressEnd.emit(true);
  }

  @HostListener('touchend')
  onTouchEnd() { this.endPress(); }

  @HostListener('mouseup')
  onMouseUp() { this.endPress(); }

   }

双击指令

    import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appDoubleTap]'
})
export class DoubleTapDirective {

  @Output() doubleTap = new EventEmitter();
  @Output() tripleTap = new EventEmitter();

  constructor() { }

  @HostListener('tap',  ['$event'])
  onTap(e) {
    if (e.tapCount === 2) {
      this.doubleTap.emit(e)
    }

    if (e.tapCount === 3) {
      this.tripleTap.emit(e)
    }
  }
}

我使用的模板示例是

 <div appDoubleTap appLongPress (onLongPressing)="lineRowLongPressed(line.lineNum)" (doubleTap)="doubleClick_calender(line)">
                            <div class="long-press-front">
                                <td>
                                    <p>{{line.orderNum}}</p>
                                </td>
                                <td>
                                    <p *ngIf="line.xxx"><img id="xxximg" style="width: 14px;" src="assets/icons/xxx.png"></p>
                                    <p *ngIf="line.yyy"><img id="yyy" style="width: 14px;" src="assets/icons/yyy.png"></p>
                                </td>
                                <td>
                                    <p>x</p>
                                </td>
                            </div>
                            <div class="long-press-dynamic-content" id="sortableLine">
                                <td *ngFor="let col of line.values" class="xxx-col-values">{{col}}</td>
                            </div>
                        </div>

我也尝试了hammerjs（按下）事件，但滚动仍然不流畅。也可以在锤子中设置新闻事件的时间跨度吗？

Answer 1

你可以使用

1. 实现长按的定时器
2. 来自 Jquery mobile 的 Jquery 'taphold' 事件
3. 或者获取一个开源 javascript 库或 jquery 插件来完成这项工作。 例如：https://pressurejs.com（自带 polyfill）

看看这个问题，你会找到适合你需求的方法 Long Press in JavaScript?