Javascript：Unitentional Focus Blur

Question

在我努力学习Javascript的过程中，我一直在尝试实现WYSIWYG代码编辑器。 我没有实现内容可编辑的div或textarea ，而是从Ajax.org的ACE书中拿出一片叶子（而不是很多叶子）。

我有一个侦听器div ， tabIndex设置为0，以处理所有输入事件。 编辑器的所有组件（如文本区域，光标和装订线）都是此侦听器的子组件。 自从实现鼠标事件处理程序以来，我一直遇到焦点在mousedown事件上丢失的问题。 显然，即使在侦听器中发生mousedown事件，也会触发blur事件。

在评论出某些方法调用并试图确切地看到导致问题的原因之后，我注意到罪魁祸首是render方法。 现在，我在每次输入后调用此方法，因此焦点丢失是非常奇怪的，特别是当我为mousedown事件调用它时。 在注释掉render方法时，如果存在mousedown事件，则不会触发blur事件。

进一步说，事实证明，在注释掉我替换文本容器的innerHTML的部分时，问题就消失了。 这又是很奇怪，因为我用的是replaceInnerHTML功能在各个地方render的功能，但这个问题似乎只有从特别更新的文字出现div 。

这是replaceInnerHTML方法（我在这里发现）：

function replaceInnerHTML(el, html) {
    var newEl = el.cloneNode(false);

    newEl.innerHTML = html;

    el.parentNode.replaceChild(newEl, el);

    return newEl;
}

这是文本层的更新功能，省略了不会发生此问题：

TextLayer.prototype.update = function(config) {
    html = [];

    var top = config.topRow;
    var last = config.lastRow;

    for(var i=top; i<=last; i++) {
        var line = this._session.getLine(i);
        if(line) {
            html.push('<div class="line" style="height:'+this.$characterSize.height+'px;">');
            this.renderLine(html, line);
            html.push('</div>');
        }       
    }   

    this._text = replaceInnerHTML(this._text, html.join(''));
    this.setSize(config.totalWidth, config.scrollHeight);
};

为什么焦点只会因替换特定节点的innerHTML而变得模糊，而且只有在mousedown事件的情况下被调用时才会变焦？

或者我在试图调试这个问题时走向了一个完全错误的方向，这个问题是由于其他原因造成的？

编辑：

感谢pimvdb，这里有一个复制问题的小提琴。 http://jsfiddle.net/wG4Yy/39/

由于重组了mousedown事件上的节点， blur事件似乎会触发。 我不知道如何解决问题。 我已经尝试使用文档片段而不是innerHTML，我也尝试使用setTimeout安排更新，但两种尝试均无效。

我该怎么做才能解决这个问题？

Answer 1

当你想要一个元素获得焦点时，你似乎必须点击一个留在那里的元素。 如果你用另一个元素替换它，浏览器显然不会被欺骗聚焦那个元素。

您可以做的是让浏览器完成其mousedown / focus等过程，然后手动关注元素。 这可以通过setTimeout(..., 0)调用来完成： http ： //jsfiddle.net/wG4Yy/41/ 。

setTimeout(function() {
    wrapper.focus();
}, 0);