Событие срабатывает, когда пользователь нажимает ввод и элемент теряет фокус

Question

Я хочу открывать модальный режим всякий раз, когда пользователь нажимает ввод в поле contenteditable, а также когда пользователь теряет фокус на элементе. Проблема заключается в том, что когда пользователь нажимает клавишу ввода, запускаются оба события (поэтому открываются два модальных режима). Как найти удобный компромисс, который позволяет запускать только каждое из событий?

Код ниже:

HTML

<div (blur)="removeLineBreaks($event); openRenameWebsiteModal($event);"
             (keydown.enter)="openRenameWebsiteModal($event)"
             [attr.contenteditable]="true"
             [attr.spellcheck]="false"
             *ngIf="websiteLoaded"
             id="builder-header-website-name"
             blockNonAlphanumericCharacters
             class="website-name" ngbPopover="Website Name" triggers="mouseenter:mouseleave">{{ websiteName }}</div>

Машинопись

  removeLineBreaks(event: any) {
    event.preventDefault();
    event.stopPropagation();
    BuilderService.removeLineBreaks(event);
  }

  openRenameWebsiteModal(event: any) {
    event.preventDefault();
    event.stopPropagation();
    if (this.websiteName !== event.target.innerHTML) {
      const modal = this.modalService.open(BuilderRenameWebsiteModalComponent, {
        windowClass: 'modal-holder',
        centered: true
      });
      modal.componentInstance.websiteName = this.websiteName;
      modal.componentInstance.newWebsiteName = event.target.innerHTML;
    }
  }

Answer 1

Вы можете легко сохранить глобальную переменную, которая проверяет, открыт ли модальный режим в настоящее время.

modal_open = false;
  openRenameWebsiteModal(event: any) {
    event.preventDefault();
    event.stopPropagation();
    if (this.websiteName !== event.target.innerHTML && !modal_open) {
modal_open = true;
      const modal = this.modalService.open(BuilderRenameWebsiteModalComponent, {
        windowClass: 'modal-holder',
        centered: true
      });
      modal.componentInstance.websiteName = this.websiteName;
      modal.componentInstance.newWebsiteName = event.target.innerHTML;
    }
  }

И если в некоторых случаях это не работает, вы можете использовать Observables