当用户按下 Enter 并且元素失去焦点时触发的事件

Question

I want to open a modal whenever the user presses enter on the contenteditable field, and also when the user loses focus on the element. The issue is that when the user presses enter, both events are fired (so two modals open up). How can I find a comfortable compromise, which only allows each of the events to be fired?

Code below:

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>

Typescript

  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

You can easily keep a global variable which checks if the modal is currently open or not.

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;
    }
  }

And if this does not work in some cases, You can use Observables