Question

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

更新

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

Answer 1

IE的unselectable expando属性会自动为您执行此操作;它不是遗传的。对于其他浏览器，请使用额外的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;
}

Answer 2

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

设置-webkit-user-select：子项的文本。

不会继承不可选择的属性。

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

Answer 3

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

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

更新

3 个答案: