如何允许 DIV 的文本选择，但阻止父 DIV 的文本选择？

Posted 2023-03-06

【中文标题】如何允许 DIV 的文本选择，但阻止父 DIV 的文本选择？

【英文标题】：How to allow text-selection of a DIV, but prevent the text-selection of the father DIV?

【发布时间】：2011-06-13 16:00:20

【问题描述】：

我希望允许用户选择驻留在多个 DIV 中的文本，这些 DIV 一个接一个地位于它们之间，并且它们之间有小间隙。 问题是，当用户拖动鼠标进行选择时，他们会越过“间隙”，这会导致整个父 DIV 被暂时选择，直到他们进入下一个子 DIV。 这会导致“闪烁”行为和糟糕的用户体验，因为父 DIV 也有图像，并且有一段时间，所有图像也被选中。 我尝试了这个论坛中建议的几种方法，包括： -moz 用户选择：无； -khtml-用户选择：无； -webkit-用户选择：无；用户选择：无； unselectable=on，并覆盖事件 onselectstart: return false; 不幸的是，如果我在父 DIV 中禁用选择文本，所有子 DIV 都会立即采用该行为，这不是我的意思。 我希望不会选择父 DIV，但它的子 DIV 会。 谢谢

更新：

“onselectstart”仅为父 DIV（及其下方的跨度/段落）调用，但在选择图像时不会调用。因此，试图操纵它并使用“return false;”。不相关；图像根本不会得到那个事件。

【参考方案1】：

IE 的unselectableexpando 属性会自动为您执行此操作；它不是继承的。对于其他浏览器，请使用额外的 CSS 规则。假设以下 HTML：

<div class="unselectable" unselectable="on">
    Some unselectable text
    <div>Some selectable text</div>
    Some more unselectable text
</div>

使用以下 CSS。这定义了一个额外的规则，专门为不可选择元素的后代启用文本选择：

*.unselectable 
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;


*.unselectable * 
   -moz-user-select: text;
   -khtml-user-select: text;
   -webkit-user-select: text;
   -o-user-select: text;
   user-select: text;

【讨论】：

嗨蒂姆我试过了，它在 IE8 中根本不起作用（它在 Firefox、Chrome 中起作用）我已经将测试上传到网络：（尝试选择文本和图像也被选中）：enosis-dev.com/select.html

@Nir Oren：我很困惑。当用户在您的示例页面中进行选择时，您究竟希望发生什么？

【参考方案2】：

-moz-user-select: -moz-none - 不能选择元素和子元素的文本，但可以使用 -moz-user-select:text 对子元素启用选择。

设置 -webkit-user-select: 给孩子的文本。

unselectable 属性没有被继承。

为孩子设置 onselectstart = null，或者如果您正在使用侦听器 - 在返回 false 之前检查目标。

【参考方案3】：

嗨蒂姆 我希望在使用鼠标执行多行选择时不会选择图像。 您的代码适用于 Firefox、Chrome 但不适用于 Ie8。 这可以在我之前的链接中看到。 美好的一天