Javascript 当用户在contenteditable元素之外单击时，如何避免失去对该元素的关注？

我想防止在

contentEditable

区域外单击时失去焦点。一些示例HTML如下所示：

<div id="content">
    <p>Hello</p>
</div>
<div id="clickThis">
    <p>If you click on this or anywhere for that matter after focusing on Hello, you lose your focus on Hello</p>
</div>

当您单击

#单击此

div或

#内容

div之外的任何位置时，即使调用了单击事件的

preventDefault

函数，您也会失去对

#内容

div的关注

此外，范围会在触发单击事件时发生更改，因此我不能在单击发生后返回到上一个范围。有没有办法在单击后保持光标位置和焦点

jsiddle:

尝试添加

$（“#内容”）.focus（）在
e.preventDefault（）之后
这不是一个完美的解决方案，因为它跳到了开始，但尝试一下

无论如何，您确定强制用户返回此区域是个好主意吗？：）
 将Juan的问题转化为答案，而不是使用click事件，您必须使用mousedown事件，如下所示：

$(document).ready(function()
{
    $('#content')[0].contentEditable=true;

    $('#clickThis').bind('click',function(e)
    {
        console.log(window.getSelection().getRangeAt(0).startContainer);
        e.preventDefault();
    });
});

$(document).ready(function()
{
    $('#content')[0].contentEditable=true;

    $('#clickThis').bind('mousedown',function(e)
    {
        console.log(window.getSelection().getRangeAt(0).startContainer);
        e.preventDefault();
    });
});

您可以看到它在这里工作：

答案是将
event.preventDefault（）
添加到
mouseDown
事件中

const button = document.getElementById('boldFormat')

button.addEventListener('mousedown', (event) => {
  event.preventDefault() // prevent loss of focus
  document.execCommand('bold', false)
})

出现此问题的原因是您正在收听的
click
事件导致
contentEditable
元素失去焦点；无论您是否运行
preventDefault
。
我知道这在Jeddable中是可能的，如果您愿意使用该插件，它也会为您提供更多功能，我的需求非常具体。我已经建立了一个完整的WYSIWYG。很难回去。谢谢你的建议。你们在桌子上做得有多精确？如果你能解释一下，也许我可以复制这个功能。这是一个你可以通过的选项，onblur:none，谢谢你没有打断我，因为我为这个问题提供了一个不同的解决方案；）试试mousedown活动，也许活动范围没有改变谢谢你，Juan。这非常有效。阻止默认的mousedown就做到了。请回复您的意见，以便我可以接受。再次感谢你的想法，玛兹兹。我还没有试过。也许它仍然有效。对我来说，是的。整个应用程序是一个WYSIWYG编辑器，当用户单击工具栏但错过按钮时，他们必须单击之前所在的内容位置，然后再次单击工具栏按钮。
$（“#content”）.focus（）解决方案也存在此问题。也就是说，他们必须单击才能回到以前的位置。谢谢你的主意。