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

Question

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

更新:

“onselectstart”仅针对父 DIV(及其下方的跨度/段落)调用，但在选择图像时不会调用。因此，试图操纵它并使用“return 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;
}