时间戳

首页 > 解决方案 > 当用户按下回车并且元素失去焦点时触发事件

javascript - 当用户按下回车并且元素失去焦点时触发事件

问题描述

每当用户在 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;
    }
  }

标签： javascriptangular

解决方案

您可以轻松地保留一个全局变量来检查模式当前是否打开。

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

推荐阅读