如何允许DIV的文本选择,但阻止父DIV的文本选择?

我想允许用户选择驻留在多个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(以及它下面的跨度/段落)调用,但在选择图像时不会调用它。 因此,试图操纵它并使用“返回假”; 不相关; 图像根本不会得到那个事件。

IE的unselectable expando属性会自动为您完成此操作; 它不是遗传的。 对于其他浏览器,请使用额外的CSS规则。 假设以下HTML:

 
Some unselectable text
Some selectable text
Some more unselectable text

使用以下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; } 

-moz-user-select:-moz-none – 无法选择元素和子元素的文本,但可以使用-moz-user-select:text在子元素上启用选择。

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

不可inheritance的属性不会被inheritance。

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

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