个人中心
gpt4 book ai didi

javascript - Firefox 和 IE 中的选择对象问题

转载 作者：行者123 更新时间：2023-11-29 18:06:56 25 4
gpt4 key购买 nike

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

  1. 双击“Some”将其选中，然后单击“Select”。 “一些”周围有一个跨度并变成灰色。
  2. 然后再次双击“Some”并点击“Unselect”。跨度消失了，查看页面内容似乎又回到了开始时的样子。
  3. 最后一次双击“Some”，点击“Select”，但没有任何选择。

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

有人知道这是怎么回事吗？为什么在步骤 3 中有两个不同的文本节点？ Why are the offsets of the selections 0 for both, when the selection seems to extend from 0 to 5, like in step 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>

最佳答案

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

在执行任何操作之前，这是 DOM:

Before

选择后，这是您的脚本对其进行更改的方式:

After selection

最后，在“取消选择”之后:

enter image description here

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

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

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

替换span与 span的 html()字符串是创建新文本节点的内容。

关于javascript - Firefox 和 IE 中的选择对象问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30533871/

25 4 0
文章推荐： mysql - 连接多个表时 Sum() 返回错误值
文章推荐： android - 预览宽高比在不同设备上不同
文章推荐： mysql - json_search 抛出错误 MySQL - #2014 - 命令不同步；你现在不能运行这个命令
文章推荐： mysql - 使用 SQL 连接到 Sage 50 数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com