Question

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

双击“Some”选择它，然后单击“选择”。 “有些”会绕过它，变成灰色。
然后再次双击“Some”并点击“Unselect”。跨度消失了，看着页面内容，它看起来又回到了它的起源。
最后一次双击“Some”，点击“Select”，没有任何内容被选中。

最后一步失败，因为选择的开始和结束被报告为在页面上的不同节点中，即使它确实看起来像是同一个节点，并且它被报告为位于两个节点的位置0。我不明白为什么它的行为与步骤1不同，因为它看起来像第2步使得页面就像在第1步之前一样。之后事情变得更加怪异。在IE9中有类似的，不太相同的怪异行为。在Chrome中它很好。

任何人都知道发生了什么事吗？为什么步骤3中有两个不同的文本节点？当选择似乎从0延伸到5时，为什么两者的选择偏移为0，就像在步骤1中一样？

此代码还有其他一些错误（尝试多次选择失败，其他很多东西都不起作用），但我只是想把这个案例理解为一个起点：

<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：

Before

选择后，以下是您的脚本如何更改它：

After selection

最后，在＆＃34;取消选择＆＃34; 之后：

enter image description here

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

要清楚，您的脚本是问题：

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

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

Firefox和IE

1 个答案: