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/