Question

我在＆lt; a＆gt;内放置了一个可满足的范围。标签。我希望能够编辑范围内的文本，因此重要的是：

将光标放在鼠标上，点击范围内的某处
使用鼠标

只要超链接中有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内，但它可以放在它的开头，而不是点击的位置。

要启用选择，您需要阻止拖动行为，但要为a元素进行更改：

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

但是，哇，draggable="false"实际上将＆＃34;光标固定为开始＆＃34;错误！这是工作示例（在FF 47中测试）：https://jsfiddle.net/8v1ebkfd/4/

Answer 2

这对我有用：

防止contenteditables内的点击默认值
对于Firefox，请删除并添加href属性以防止将光标放置在contenteditable-element的开头

http://jsfiddle.net/uy4q0zcm/1/

// if contenteditable inside a link
document.addEventListener('click', e=>{
    if (e.button !== 0) return;
    if (e.target.isContentEditable) {
        e.preventDefault();
    }
    if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
        e.preventDefault();
    }
});

// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
    if (!e.target.isContentEditable) return;
    var link = e.target.closest('a');
    if (link) {
        const href = link.getAttribute('href')
        link.removeAttribute('href');
        setTimeout(()=>link.setAttribute('href', href))
    }
});

Firefox中超链接内部的可疑跨度问题

2 个答案: