Firefox의 하이퍼 링크 내부에서 contenteditable span의 문제점

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" 실제로 "커서 처음으로"버그를 수정! 다음은 작동 예제입니다 (FF 47 테스트 됨) : https://jsfiddle.net/8v1ebkfd/4/