HTML5內容中的奇怪行為

Question

我在一個列表項中有一個跨度。

<ul>
    <li>text part 1
        <span class="note">this is a note</span> 
        text part 2
    </li>
    <li>text part 3</li>
</ul>

在此范圍內，當您雙擊它時，它將變為可編輯的。

$('span').on('dblclick', function(ev){
    ev.preventDefault();
    $(this).attr('contenteditable', 'true');
    this.focus();
});

由於某種原因，焦點無法正常工作：您沒有看到光標閃爍，但是如果您開始鍵入，它將在跨度上書寫，並在其前面添加一些文本，這是li內容的其余部分。 。

令人困惑？ 這是在擺弄 （Chrome）

如果將事件更改為“單擊”，則一切正常。

這是錯誤嗎？ 它僅發生在Chrome中，Firefox似乎還不錯。 有人遇到過嗎？

更新：這是發生的視頻

Answer 1

您應該在div而不是跨度上執行此操作，請參見此處的更正：js：

$('.note').on('dblclick', function(ev){
    $(this).attr('contenteditable', 'true');
});

html：

 ul> <li>sdfjdslfjdlkfjsdlkjdsfl sdfh <div class="note">this is a note</div> j fhdsf kfh. </li> <li>sdfjdslfjdlkfjsdlkjdsfl sdfh j fhdsf kfh.</li> </ul> 

活着看到它http://jsfiddle.net/rB8Gs/3/