keydown en una tabla dentro de un contentEditable div

Tengo un div en mi dom que es contentEditable y ese div contiene una tabla dentro de él.

My content

Puedo editar el valor de td.

Pero, sin embargo, cuando adjunto un listador de eventos keydown en esa tabla (o td), el evento no se desencadena. La combinación de teclas se desencadena únicamente en el div de contentEditable.

¿Cómo escuchar el evento keydown en la tabla (o td) pero no en el contentEditable div?

Solo los elementos que pueden recibir el foco (como las entradas y los elementos contenteditable ) desencadenan eventos clave. Esto no incluye elementos dentro de elementos contenteditable.

Puede usar el objeto de selección para verificar dónde está el símbolo de intercalación y, por lo tanto, si el evento clave se originó en algún lugar dentro de la tabla. Lo siguiente funcionará en todos los navegadores principales excepto 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; } 
 

Non-table content. Type in here

Table content. Type in here