Question

我的dom中有一个div，它是contentEditable，div里面包含一个表。

<div contentEditable>

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

我可以编辑td的值。

但是当我在该表（或td）上附加keydown事件列表器时，不会触发该事件。 keydown仅在contentEditable div上触发。

如何监听表（或td）上的keydown事件，而不是在contentEditable div上？

Answer 1

只有可以获得焦点的元素（例如输入和contenteditable元素）才会触发关键事件。这不包括满足要素的元素。

您可以使用选择对象来检查插入符的位置，从而检查键事件是否源自表内的某个位置。除了IE＆lt; = 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>

在contentEditable div内的桌子上的keydown

1 个答案: