Firefox 和 IE 中的选择对象问题

Question

我有一些 javascript 与 select 离子混在一起。完整的代码做了一些复杂的事情，我现在不想进入，但我有一个较小的测试用例，我在这里不明白。如果加载此页面，您应该会看到一些文本和两个按钮。

双击 "Some" 到 select，然后单击 "Select"。 "Some" 周围有一个跨度并变成灰色。
然后再次双击 "Some" 并点击 "Unselect"。跨度消失了，查看页面内容似乎又回到了开始的样子。
最后一次双击 "Some"，点击 "Select"，select 什么也没有。

这最后一步失败了，因为 selection 的开始和结束被报告为在页面上的不同节点中，即使它确实看起来像同一个节点，并且被报告为在两个节点的位置 0。我不明白为什么它的行为与第 1 步不同，因为在我看来，第 2 步使页面与第 1 步之前一样。之后事情变得更奇怪了。在 IE9 中有类似但不完全相同的奇怪行为。在 Chrome 没问题。

有人知道这是怎么回事吗？为什么在步骤 3 中有两个不同的文本节点？当 selection 似乎从 0 延伸到 5 时，为什么两者的 selections 的偏移量都为 0，就像在步骤 1 中一样？

此代码还有一些其他错误等（尝试执行多个 selection 失败，很多其他事情都不起作用），但我只是试图将这种情况作为起点来理解:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<div id="text">Some test words</div>
<button onclick='select()'>Select</button>
<button onclick='unselect()'>Unselect</button>
<div id="log"></div>
<script type='text/javascript'>
function log(message)
{
    var log = document.getElementById("log");
    log.innerHTML += message + "<br>";
}
function logSelection(selection)
{
    var range = selection.getRangeAt(0);
    var startContainer = range.startContainer;
    var endContainer = range.endContainer;
    log("Node types: " + startContainer.nodeType + ", " + endContainer.nodeType + ", " + range.commonAncestorContainer.nodeType)
    log("startContainer: " + (startContainer.nodeType == 3 ? startContainer.wholeText : startContainer.innerHTML));
    log("endContainer: " + (endContainer.nodeType == 3 ? endContainer.wholeText : endContainer.innerHTML));
    log("commonAncestorContainer: " + (range.commonAncestorContainer.nodeType == 3 ? range.commonAncestorContainer.wholeText : escape(range.commonAncestorContainer.innerHTML)));
    log("equal: " + (startContainer == endContainer));
    log("start: " + range.startOffset + " end: " + range.endOffset);
}
function select()
{
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var start = range.startOffset;
    var end = range.endOffset;
    var startContainer = range.startContainer;
    var endContainer = range.endContainer;
    logSelection(selection);
    startContainer.parentNode.innerHTML = startContainer.wholeText.substring(0, start)
        + "<span style='background-color: gray'>"
        + startContainer.wholeText.substring(start, end)
        + "</span>"
        + startContainer.wholeText.substring(end, startContainer.wholeText.length);
    selection.removeAllRanges();
    log("");
}
function unselect()
{
    var selection = window.getSelection();
    logSelection(selection);
    selection.removeAllRanges();
    var textDiv = $("#text");
    log("start: " + escape(textDiv.html()));
    textDiv.find("span").each(function () {
        var $span = $(this)
        $span.replaceWith($span.html());
    });
    log("final: " + escape(textDiv.html()));
    log("");
}
</script>

Answer 1

Chrome 调试器可以清楚地显示您的假设在哪里出错：

在采取任何行动之前，这是DOM:

选择后，你的脚本是这样改变它的：

最后，在 "unselection" 之后：

最后的显示揭示了问题所在：您没有连接字符串值节点，而是创建了一个新节点。 父 <div> 包含两个文本节点，因此您的选择将跨越它们。

需要说明的是，您的脚本存在问题：

textDiv.find("span").each(function () {
    var $span = $(this)
    $span.replaceWith($span.html());
});

用 span 的 html() 字符串替换 span 是创建新文本节点的原因。

Firefox 和 IE 中的选择对象问题

Trouble With Selection Object in Firefox and IE

javascript

selection