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

我正在使用以下代码通过更改字体来在contenteditable div中编辑文本。当单击作为样式化下拉菜单的div时，所选内容将以chrome消失。它在Firefox，Opera甚至IE中都可以正常工作！

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

注意：使用“ mouseover”而不是“ click”时效果很好

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;
        });

    }
}

最佳答案

一种解决方法是使用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/