Предотвратить запуск события клика после пользовательского события

Question

Нет события "mousehold", поэтому я написал одно:

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

@Directive({ selector: '[custMousehold]' })
export class MouseholdDirective {

  @Input() duration: number = 350; // ms
  @Output() mousehold: EventEmitter<any> = new EventEmitter();
  public timeout: NodeJS.Timer;

  @HostListener('mousedown', ['$event'])
  mousedown(event: MouseEvent) {
    if (event.which !== 1) return; // left mouse button only
    this.timeout = setTimeout(() => {
      this.mousehold.emit(event);
    }, this.duration);
  }

  @HostListener('mouseup')
  mouseup() { clearTimeout(this.timeout); }

}

Вот как я прикрепляю его к элементу:

<span custMousehold (mousehold)="do something ...

Это прекрасно работает.Но у меня также есть событие click для этого же элемента:

<span custMousehold (mousehold)="do something" (click)="do something else ...

И я хочу, чтобы событие click сработало, только если mousehold не сработало.Я пробовал с preventDefault() и stopPropagation() по всему коду, но они не имеют значения.click всегда стреляет.

Answer 1

Я нашел решение, которое работает и довольно компактно, но, возможно, не так элегантно.Кто-то может опубликовать лучший.Я немного расширил директиву, чтобы она выставляла логическую переменную для представления, которое сообщает, сработало ли событие:

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

@Directive({ selector: '[custMousehold]', exportAs: 'custMousehold' })
export class MouseholdDirective {

  @Input() duration: number = 350; // ms
  @Output() mousehold: EventEmitter<any> = new EventEmitter();
  @Output() fired: boolean;
  public timeout: any;

  @HostListener('mousedown', ['$event'])
  mousedown(event: MouseEvent) {
    this.fired = false;
    if (event.which !== 1) return; // left mouse button only
    this.timeout = setTimeout(() => {
      this.fired = true;
      this.mousehold.emit(event);
    }, this.duration);
  }

  @HostListener('mouseup')
  mouseup() { clearTimeout(this.timeout); }

}

В представлении я могу получить доступ к этой переменной fired следующим образом:

<span custMousehold #custMousehold="custMousehold" (click)="!custMousehold.fired ? ...

Подробнее

Answer 2

Вы можете отфильтровать событие click, чтобы проверить, было ли отправлено mousehold.Если это так, просто проигнорируйте событие click.

Я предоставляю работу plunkr , чтобы показать мою идею.Основная проблема была связана с mouse up, выпущенным до события click.У меня есть небольшие изменения в mouseup слушателе в упомянутой директиве.