Проблемы с contenteditable span внутри гиперссылки в Firefox

Question

У меня есть контент-диапазон, размещенный внутри тега <a>. Я хотел бы, чтобы иметь возможность редактировать текст внутри диапазона, так что важно:

• поместите курсор на щелчку мыши где-нибудь внутри диапазона
• выбрать часть текста внутри диапазона с помощью мыши

Оба не работают в Firefox, как только в гиперссылке есть атрибут href (что также необходимо в моем случае). Без этого атрибута нет проблем, и в Chrome нет проблем.

Пожалуйста, попробуйте my example на JSFiddle.

<ul> 
    <li> 
    <a href="#"> 
     <span contenteditable="true">PlacingCursorOrTextSelectionInFirefoxImpossible</span> 
    </a> 
    </li> 
    <li> 
    <a> 
     <span contenteditable="true">noProblemsHereSoFar</span> 
    </a> 
    </li> 
</ul> 

Answer 1

Что вы можете сделать, чтобы улучшить поведение щелчка, чтобы предотвратить его распространение, как это:

<a href="#"> 
    <span contenteditable="true" onclick="event.stopPropagation();"> 
    PlacingCursorOrTextSelectionInFirefoxImpossible 
    </span> 
</a> 

К сожалению, это только позволяет поместить курсор внутрь span, но somewhy положить его начало, а не там, где один щелкнул.

Чтобы включить Выбор, необходимо предотвратить тащит поведение, но это должно быть изменено для a элемента:

<a href="#" draggable="false"> 
    <span contenteditable="true" onclick="event.stopPropagation();"> 
    PlacingCursorOrTextSelectionInFirefoxImpossible 
    </span> 
</a> 

Но ничего себе, draggable="false" фактически установил «курсор в начало» ошибка! Вот рабочий пример (проверен в FF 47): https://jsfiddle.net/8v1ebkfd/4/