javascript - 当用户在元素外部单击时，您如何避免失去对该元素的关注？

Question

我想防止在 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>

示例 Javascript 如下所示:

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

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

当您单击 #clickThis div 或 #content div 之外的任何位置时，您将失去对 #content div 的关注，即使您调用点击事件的 preventDefault 函数。

此外，范围会在点击事件被触发时发生变化，所以我不能在点击发生后就返回到之前的范围。有没有办法在点击发生后保持光标位置和焦点？

jsFiddle:http://jsfiddle.net/VivekVish/FKDhe/4/

Answer 1

将 Juan 的问题转化为答案，而不是使用 click 事件，您必须使用 mousedown 事件，如下所示:

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

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

你可以看到它在这里工作:

http://jsfiddle.net/FKDhe/7/