javascript - 中的元素在 contenteditable 中有时不会收到按键事件

Question

我创建了一个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>

和 JavaScript 代码：

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

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

演示链接：http: //jsfiddle.net/wCs8J/​​1 /

问题是，当您单击右侧<li>（当光标为默认箭头时）时，您将能够在<a>. 但是，<a>不接收keypress，只有 maindiv接收它。为什么？我应该怎么做才能让它工作？

Answer 1

将 ContentEditable 关闭#foo继续广播事件#test就好了

http://jsfiddle.net/Maslow/wCs8J/​​2/

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