<ul> 文本选择的错误行为答案

【问题标题】：Incorrect behavior of text selection with <ul><ul> 文本选择的错误行为
【发布时间】：2014-09-26 23:28:38
【问题描述】：

我遇到了仅在 FF 中发生的不正确的文本选择行为。

通过单击li 元素 FF 的项目符号显示选择跨越整个 li 元素，但在 JS 中获取此选择范围只会导致选择 1 个字符，这显然是不正确的。

通过从文本开始用鼠标拖动选择来选择文本会为当前选择创建正确的Range。

现场小提琴描述问题在这里：http://jsfiddle.net/keaukraine/4ZE3a/

【问题讨论】：

当您使用firefox 标记此内容时，您无需在问题标题中添加“firefox -”。

标签： javascript html firefox textselection

【解决方案1】：

您误解了范围。范围边界表示为节点内的偏移量；如果该节点是文本节点，则它是该节点文本中的字符偏移量。但是，如果节点是元素，则偏移量是边界之前的子节点数，而不是字符偏移量。在这种情况下，选择范围的开始边界在<li> 元素中的偏移量0 处，结束边界在<li> 元素中的偏移量1 处。 <li> 元素只有一个子节点（文本节点），因此范围包含元素的所有内容。

【讨论】：

【解决方案2】：

Tim Down 的另一个答案是对的，这里是相关的documentation：

如果 startContainer 是 Text、Comment 或 CDATASection 类型的节点，则 [startOffset] 是从 startContainer 开始到 Range 边界点的字符数。对于其他Node类型，startOffset是startContainer的起点和Range边界点之间的子节点数。

问题是您无法轻易检测元素或文本节点是否被点击，因为节点不会触发事件。这是一个快速的解决方法：

将li 内容包装在span 元素中。现在您可以检查选择了哪个元素并相应地计算偏移量。

<ul>
    <li>
        <span>first item</span>
    </li>
    <!-- ... -->
</ul>

var startOffset, endOffset;
if(e.target.tagName == 'LI') {
     startOffset = 0;
     endOffset = e.target.textContent.trim().length;
} else if(e.target.tagName == 'SPAN') {
    startOffset = range.startOffset;
    endOffset = range.endOffset;
}

【讨论】：