Javascript 聚焦内容可编辑="；“真的”；单击contentEditable="；假；子节点

请参见以下示例：

这里有更多的文本
不可编辑
嗨，这是我的内容
$（文档）。在（'单击'，'上。可编辑范围'，函数（）{
$（this）.closest（'.editable'）[0].blur（）；
$（this）.closest（'.editable'）[0].focus（）；
});

我希望将焦点放在父contentEditable=“true”上，并将插入符号放在contentEditable=“false”span子节点的前面或末尾

在本例中，当用户单击不可编辑的子节点时，可编辑的父节点似乎处于焦点位置，但没有插入符号，因此无法键入

除非先模糊它，否则尝试用jquery强制它似乎没有效果，但随后选择位置被设置为开头，这不是期望的行为

有没有一种简单的方法可以做到这一点，或者我需要一个库吗？

请检查以下内容：

基本思想是在{content:“caption”}

span.不可编辑：：在{
内容：attr（名称）；
背景：金；
显示：内联块；
}

这里有更多的文本
嗨，这是我的内容

检查以下内容：

基本思想是在{content:“caption”}

span.不可编辑：：在{
内容：attr（名称）；
背景：金；
显示：内联块；
}

这里有更多的文本
嗨，这是我的内容

<div class="editable" contentEditable="true">Some more text here
  <span contentEditable="false">not editable</span>
  Hi this is my content
</div>

$(document).on('click', '.editable span', function() {
   $(this).closest('.editable')[0].blur();
  $(this).closest('.editable')[0].focus();
});