Почему выбор исчезает при нажатии на div?

Question

Я использую следующий код, чтобы отредактировать текст в contenteditable div, изменив его шрифт. при нажатии на div, который является стилизованным выпадающим меню, выбор исчезает в хроме. Он отлично работает в firefox, opera и даже в IE!

Rangy не находит выделенного текста для обработки. Мне интересно, почему!

Примечание: он отлично работает при использовании «MouseOver» вместо «нажмите»

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

Вы должны сохранить данные выбора до того, как щелчок происходит. Например, сохраните его с помощью мыши и используйте его, когда пользователь нажимает.

Answer 2

Одним из способов является использование события 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/