javascript - contentEditable div 内表格上的 keydown

Question

我的 dom 中有一个 contentEditable 的 div，并且该 div 内部包含一个表格:

<div contentEditable>
   
   <table id="editableTable">
      <tr>
         <td> My content </td>
     </tr>
  </table>
</div>

我可以编辑 td 的值。

但是，当我在该表(或 td)上附加 keydown 事件监听器时，该事件不会被触发。keydown 仅在 contentEditable div 上触发。

如何监听 table(或 td)上的 keydown 事件，而不是 contentEditable div 上的事件？

Answer 1

只有可以接收焦点的元素(例如输入和 contenteditable 元素)才会触发按键事件。这不包括 contenteditable 元素中的元素。

您可以使用选择对象来检查插入符的位置，从而检查按键事件是否源自表内的某个位置。以下内容适用于除 IE <= 8 之外的所有主要浏览器:

function isOrIsDescendantOf(node, ancestorNode) {
  while (node) {
    if (node == ancestorNode) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
}

function caretIsInside(node) {
  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.focusNode) {
      return isOrIsDescendantOf(sel.focusNode, node);
    }
  }
  return false;
}
  
window.onload = function() {
  document.getElementById("editor").addEventListener("keydown", function() {
    var table = document.getElementById("editableTable");
    document.getElementById("info").innerHTML = "keydown came from table: " + caretIsInside(table);
  }, false);
};

table * {
  color: blue;
  font-weight: bold;
}

<div contenteditable="true" id="editor">
  <p>Non-table content. Type in here</p>

   <table id="editableTable">
      <tr>
         <td>Table content. Type in here</td>
     </tr>
  </table>
</div>
<div id="info"></div>