Javascript <；李>；在内容上，有时不'；无法接收按键事件

我创建了一个

contenteditable

div

。我想在其中一个子项中锁定文本编辑（在下面的示例中，我想锁定“是”）。以下是HTML：

<div id="foo" contenteditable="true">this is a test
    <div contenteditable="false"> 
        <ul>
            <li>
                <a id="test" contenteditable="true" href="stackoverflow.com">a link here</a>
            </li>
        </ul>
    yes
    </div>
    ...    
</div>

链接到演示：

---

问题是，当您单击

的右侧时（当光标为默认箭头时），您将能够编辑

中的文本。但是，

不接收

按键

，只有main

div

接收它。为什么？我该怎么做才能让它工作呢？

从

#foo

上取下可编辑的内容，继续播放

#test

中的事件，一切正常

---

也许这是浏览器特有的问题？

也许你不应该有嵌套的内容可编辑区域？没有它们，标签将永远不会收到任何事件。aurora 24，可能也是早期版本。但是#foo必须是内容可编辑的。它是所见即所得编辑器的主要部分。

document.getElementById('foo').addEventListener("keypress", function(e){
    alert("div " + e.which);
});

document.getElementById('test').addEventListener("keypress", function(e){
    alert("a " + e.which);
});