获取嵌套 contenteditable 元素的当前目标元素可以通过以下方法实现:
- 使用
event.target:event.target是触发事件的元素。 - 使用
event.currentTarget:event.currentTarget是当前正在处理事件的元素。 - 使用
event.composedPath():获取事件传播路径上的所有节点。
尝试了上述各个方法都行不通 最后通过 使用Selection API 判断光标位置,通过 window.getSelection() 获取当前选区,并判断选区的父节点是否为子元素
function changeKeydown(e: KeyboardEvent) {
const selection = window.getSelection();
const range = selection?.getRangeAt(0); // 获取当前选区的范围
const targetNode = range?.commonAncestorContainer; // 获取选区的公共祖先节点
if (edit1.value.contains(targetNode)) {
console.log('来自 edit1 的键盘事件');
// 在这里处理 edit1 的键盘事件
} else if (edit2.value.contains(targetNode)) {
console.log('来自 edit2 的键盘事件');
// 在这里处理 edit2 的键盘事件
} else {
// 在这里处理最外层contenteditable的键盘事件
}