获取嵌套 contenteditable 元素的当前目标元素可以通过以下方法实现

105 阅读1分钟

获取嵌套 contenteditable 元素的当前目标元素可以通过以下方法实现:

  1. 使用 event.targetevent.target 是触发事件的元素。
  2. 使用 event.currentTargetevent.currentTarget 是当前正在处理事件的元素。
  3. 使用 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的键盘事件
  }