Question

我正在使用Reactjs。每当我得到选择时，window.getSelection（）都会选择不同的元素。

有时会选择文本，而有时会选择父span元素。我需要它从点a选择到点b，然后选择跨度的所有子元素到文本元素。每个范围包含两个，有时三个子节点。这些子节点是文本，文本和
标记。

Selection {anchorNode: text, anchorOffset: 0, focusNode: span.1234, focusOffset: 1, isCollapsed: false, …}
anchorNode: text
anchorOffset:0
baseNode:text
baseOffset:0
extentNode:span.1234
extentOffset:1
focusNode:span.1234
focusOffset:1
isCollapsed:false
rangeCount:1
type:"Range"
__proto__:Selection

我还需要选择范围内的所有子元素，而不仅仅是父范围。在上面的示例中，首先选择子文本，然后选择父跨度结束。发生这种情况时，选择会自动消失。

理想情况下，我想避免在#surroundingDiv外部进行选择，而仅对其中的所有范围启用选择。

<div id="surroundingDiv">
    <span>Some</span><span>text</span><span>sits</span><span>here</span><span>inbetween</span><span>the</span><span>spans</span>
</div>

我已经尝试了从selectAllChildren（）到setBaseAndExtent（），queryselectors的所有操作，甚至尝试了创建自定义选择机制的难题，甚至还有其他事情。

我遇到了这段代码，该代码使我能够筛选选择并将其限制为具有1234类的任何范围。尽管这并不妨碍选择外部元素。

document.eventEmitter('mouseup', (event) => {
if (/1234/.test(event.target.className)) {

}
}

然后我将css应用于outter元素，尽管它仍然无法正常工作。

.noSelect {
      -webkit-user-select: none; /* Webkit */
      -moz-user-select: none;    /* Firefox */
      -ms-user-select: none;     /* IE 10  */
      -o-user-select: none;
      user-select: none;
      user-select: none;
      -khtml-user-select: none;
    }

以下是跨度的一些图片： Spans with text. Spans with text and a
tag.

我想出了一种解决方法，在选择之后，我使用sel.setBaseAndExtent（）来更改选择，尽管它很笨拙，而且我认为在为应用程序构建附加功能时扩展性不佳。

我需要确保每次用户选择文本时，都选择相同的锚点和焦点节点元素，并且也不要选择外部元素（在div之外）。任何帮助都将是惊人的！

在选择文本时遇到麻烦，anchorNode和extentNode选择的元素<span>或文本不同，导致选择不稳定

0 个答案: