Firefox 中的“用户选择：无”和奇怪的行为

Posted 2023-03-06

【中文标题】Firefox 中的“用户选择：无”和奇怪的行为

【英文标题】："user-select: none" and strange behaviour in Firefox

【发布时间】：2011-03-05 21:52:33

【问题描述】：

我试图阻止 Firefox 中的某些文本突出显示，但不是页面上的所有元素。考虑以下几点：

<div style="-moz-user-select: none;">
I cannot be highlighted
    <div  style="-moz-user-select: text;">
    I should be highlightable, but am not.
    </div>
</div>

据我了解，使用上面的 css 规则，内部 div 的文本应该是高亮的。但是，这似乎不起作用。实际上，无法突出显示任何文本。

我想知道我是否做错了什么？如果没有，有人知道这种情况的解决方法吗？

谢谢！

ps 我应该使用备用添加...

-webkit-user-select: none;

...在上面的示例中，在 webkit 浏览器中运行良好

【问题讨论】：

我有一个网络应用程序，它可以进行大量的拖放操作。意外的鼠标点击可能会导致突出显示，这是无害的 - 但可能会让用户感到困惑。

【参考方案1】：

您可能想尝试onmousedown="return false"，如果您不想要cursor: 的选择或指针，您可以更改光标

【参考方案2】：

Mozilla 将none 属性告知以下内容：

元素和子元素的文本将显示为 无法选择。任何使用 然而，选择将包含这些 元素。

阅读-moz-user-select。

【讨论】：

确实如此。但是，内部 -moz-user-select 仍未正确应用。在实践中，所有内容都可能被突出显示 - 但只有内部文本应该似乎被突出显示。

无论这个属性做什么，内层div都是外层div的一个子元素。

这不能解决问题

【参考方案3】：

替换

<div style="-moz-user-select: none;">

与

<div style="-moz-user-select: -moz-none;">

-moz-user-select属性的description表示-moz-none表示元素和子元素的文本不能被选中，但是可以使用-moz-user-select: text;对子元素启用选择

【讨论】：

让我着迷的是使用 -moz-user-select: all。出于某种原因，这不起作用，您需要使用 -moz-user-select: text。