ipad двойное нажатие и длительное нажатие события в угловых 7

Question

Как мы можем правильно реализовать двойные и длинные нажатия в угловых 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 'taphold' событие от мобильного телефона Jquery
3. Или получите библиотеку javascript с открытым исходным кодом или плагин jquery для выполнения этой работы. Например: https://pressurejs.com (поставляется с polyfill)

Посмотрите на этот вопрос, и вы найдете подходящий способ для ваших нужд. Долгое нажатие в JavaScript?