javascript - 为什么单击div时选择消失？

Question

我正在使用以下代码通过更改字体来编辑 contenteditable div 中的文本。当单击作为风格化下拉菜单的 div 时，选择会在 chrome 中消失。它在 Firefox、Opera 甚至 IE 中都能正常工作！

Rangy 没有找到任何要处理的选定文本。我想知道为什么！

注意：使用“鼠标悬停”而不是“点击”时效果很好

DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dt.on('click', function(event){
            $(this).toggleClass('active');
            if (savedSel) {
                rangy.removeMarkers(savedSel);
            }
            savedSel = rangy.saveSelection();
            savedSelActiveElement = document.activeElement;
            return false;
        });

    }
}

Answer 1

一种解决方法是使用mousedown事件而不是click事件并阻止默认行为。

obj.dt.mousedown(function(event){
    event.preventDefault();
    $(this).toggleClass('active');
    if (savedSel) {
        rangy.removeMarkers(savedSel);
    }
    savedSel = rangy.saveSelection();
    savedSelActiveElement = document.activeElement;
    return false;
});

演示：http: //jsfiddle.net/NJuMK/1/

Answer 2

您应该在单击发生之前保存选择数据。例如，将其保存在鼠标上方，并在用户单击时使用。