我需要使用 DOM 选择 API getSelection 选择 HTML 文档中的所有节点。
应排除用户(即使用鼠标)无法选择的节点。
因此，如果某个元素应用了 CSS 规则 user-select: none 或 -moz-user-select: none，我的编程选择应排除这些元素。
如果我手动选择文本(通过鼠标)，这些元素将不会被选择。如果我在其父元素之一上应用 window.getSelection().selectAllChildren，则不可选择的元素也会被选中。
我尝试了 Selection 和 Range 对象的不同方法，但还没有找到一种方法来仅以编程方式选择那些可手动选择的元素。
<body>
<div>Selectable</div>
<div style="-moz-user-select:none">
<span id="span">Non-Selectable</span>
</div>
<script>
const sel = window.getSelection();
sel.selectAllChildren(document.body);
console.log(sel.containsNode(document.getElementById('span')));
// outputs true
</script>
</body>
有人知道如何以编程方式仅选择那些可以手动选择的元素吗？
编辑所以我需要一个函数，它接收一个节点作为参数，并返回一个 bool 值来判断该节点是否可选:
function isSelectable(node) {
// determine if node is selectable
}
最佳答案
可能是这样的:
var userselect = [
'-webkit-touch-callout', /* iOS Safari */
'-webkit-user-select', /* Safari */
'-khtml-user-select', /* Konqueror HTML */
'-moz-user-select', /* Firefox */
'-ms-user-select', /* Internet Explorer/Edge */
'user-select'
];
function isSelectable(element) {
var style = getComputedStyle(element);
var canSelect = !userselect.some(key => style[key] === 'none');
if(canSelect) {
if(element.parentElement) return isSelectable(element.parentElement);
return true;
}
return false;
}
基本上，如果此元素或其任何祖先元素是不可选择的，则此元素也是不可选择的。我们检查这个元素，然后使用递归来检查祖先元素，当我们用完祖先元素或找到一个设置为不可选择的元素时停止。
我对用户选择如何工作的假设可能是错误的；即使在将祖先设置为不可选择之后，也可以强制内部元素可选择。可以重新组织逻辑以减少困惑。当然可以使用循环来消除递归。 userselect 数组可以使用一些智能；如果这是用于扩展，您可以使用它来通知您需要检查哪些属性。此代码需要一个元素而不是节点。我还没有实际测试过这段代码，但看起来它应该可以工作。
关于javascript - 如何以编程方式仅选择用户可选择的所有文本节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54161140/