每当用户在 contenteditable 字段上按 Enter 键时,以及当用户失去对元素的焦点时,我想打开一个模式。问题是,当用户按下 Enter 键时,两个事件都会被触发(因此会打开两个模式)。我怎样才能找到一个舒适的折衷方案,只允许触发每个事件?
代码如下:
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;
}
}
最佳答案
您可以轻松保留一个全局变量来检查模式当前是否打开。
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
关于javascript - 当用户按下 Enter 并且元素失去焦点时触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60510302/