Firefoxでのハイパーリンク内のコンテンツ制作可能なスパンの問題

Question

の>タグの中にcontenteditable spanがあります。それはすることが重要ですので、私はスパン内のテキストを編集できるようにしたいと思います。どこかのスパン内部

• マウスクリック上の場所にカーソルを
• は、マウスを使用してスパン内のテキストの一部を選択し

ハイパーリンクにhref属性（私の場合も必要です）があるとすぐに、どちらもFirefoxでは動作しません。この属性がなくても問題はなく、Chromeに問題はありません。

JSFiddleでmy exampleを試してください。あなたがクリックの動作を改善するために何ができるか

<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"は実際には、「カーソルの先頭に」バグを修正しました！実際の例（FF47でテスト済み）：https://jsfiddle.net/8v1ebkfd/4/