重新调度键盘事件

Question

开发 Angular / TypeScript 应用程序，其中我们有一个自定义的基本文本编辑器。

尝试适当地处理用户突出显示的选择然后按下按键以替换该选择的情况。

为了解决这个问题，我们需要在插入其预期内容之前正确删除他们选择的“隐藏”组件。

我最初的想法是：

1. 捕获KeyDown事件
2. 检查是否选择了突出显示的范围
3. 如果是，则删除所有选定的内容
4. 重新调度 KeyDown 事件，以便插入适当的内容

这是我们方法的截断版本onKeyDown：

cloneKeyboardEvent(eventToClone): KeyboardEvent {
    return new KeyboardEvent(eventToClone.type, {
        key: eventToClone.key,
        code: eventToClone.code,
        location: eventToClone.location,
        ctrlKey: eventToClone.ctrlKey,
        shiftKey: eventToClone.shiftKey,
        altKey: eventToClone.altKey,
        metaKey: eventToClone.metaKey,
        repeat: eventToClone.repeat
    });
}

onKeyDown($event: KeyboardEvent) {
    // Check if there's a selection
    if (this.isSelectionRange) {
        Helpers.stopEvent($event);

        // Delete components in selection
        this.deleteComponentsInSelection($event);

        const clonedEvent = this.cloneKeyboardEvent($event);
        document.dispatchEvent(clonedEvent);

        return true;
    }
}

一切正常到#4。

该clonedEvent事件与原始事件匹配，但不会触发。debugger我在 的开头插入了 a onKeyDown()，它只在初始按键时被击中一次，而不是在dispatchEvent().