为什么不推荐使用 .disableSelection()？答案

【问题标题】：Why is .disableSelection() deprecated?为什么不推荐使用 .disableSelection()？
【发布时间】：2012-12-07 05:10:21
【问题描述】：

.disableSelection 在 JQueryUI 1.9 中已弃用。从字面上看，我能找到的唯一解释是"Disabling text selection is bad. Don't use this." 和"We shouldn't allow developers to mess with text selection. This was originally for the interaction plugins, but they're all handling text selection properly on their own at this point."

由于没有建议的替代方案，我认为他们的意思是总是不好，但我无法理解他们的原因。双击/三次单击或其他无意义的选择精致的 UI 应用程序会不正确地应用文本突出显示效果，并且（对我而言）立即消除了强大用户体验的错觉。

桌面应用程序不会受此影响！桌面环境中的按钮和其他控件是像素区域，无论您对它们做什么（或者它们已损坏），它们看起来都是实心的并且可以直观地操作。 Web 应用程序由复杂的 html 框、背景、边框和图像（像素的 Web 模拟）组成的事实没有理由背叛我们与之交互的屏幕元素不是原子的物理对象的错觉。

在下图中，可以说某些文本应该是可选择的，例如面板中可能是应用程序数据的文本段落。但是对于某些应用程序来说，其他部分（例如按钮、选项卡、折叠式标题和模式对话框后面的文本）中的文本将是一个合理的设计选择。这尤其适用于可拖动/可排序的行为。

1) 我是否误解了他们的决定？建议是否比我意识到的更具体到 JQuery？

2) 如果作为一般性声明，文本应该始终可以像这样选择，请提供更完整的解释说明。

3) 如果我还是要这样做，那么在 disableSelection 已被弃用的情况下，什么是最高效、最完整、最受尊重、跨浏览器且普遍可访问的？

【问题讨论】：

我不同意双击/三次单击选择不是用户想要的假设。事实上，我几乎总是选择这种方式！此外，您可以阻止用户选择不应选择的 UI 元素。请参阅user-select 属性。
我同意它有时是预期的操作，但作为应用程序设计人员，我觉得当我认为文本选择不是一个重要功能并且它可能会干扰时，我应该能够禁止它其他优先级更高的操作。
您应该考虑将该行为留给系统，以便您的应用程序按预期执行。这就是我不搞乱这样的事情的理由。我确定还有其他人。
LOL 它实际上在文档页面上说“禁用文本选择很糟糕。不要使用它。”...多么傲慢和无益。有时我认为我们忘记了并非每个 HTML 页面本身都是“网站”，有些是“应用程序”或“工具”，在这些页面中执行诸如禁用文本选择之类的操作是有意义的。我认为 jQuery 团队会充分意识到这一点。
我也想知道：为什么不推荐使用这个函数，然后在一些官方的 jQuery UI 示例中列出它？（例如：jqueryui.com/draggable/#sortable）。就个人而言，我认为这应该留给用户，而不是 jQuery UI 团队。这就像说一把刀可以不恰当地使用，所以我们将停止生产它。我本可以在我的一个应用程序中真正使用此功能，而不是弄乱大量 CSS 代码并尝试如何将其实现到我的复杂脚本中，但直到我发现它可拖动时我才知道它存在。

标签： jquery-ui textselection

【解决方案1】：

禁用文本选择很有用的实际情况是<ul> 元素，其<li> 已被编程为可拖动（用于排序）。拖动工作正常，除了在用户拖动时选择了文本。当然，这是 disableSelection() 的合法用途。

我知道不用这种方法也可以做到（否则方法一开始就不可能做到）；但我想使用 disableSelection() 的原因是在一个地方简洁地表达我的愿望并让 jQuery-UI 处理我的跨浏览器兼容性问题，而不是必须使用几个 CSS 规则和一些 JS 的组合（对于 IE7） .

我认为此功能已被弃用，因为有人对禁用选择的网站感到恼火，并认为这不是他们应该鼓励的做法。这类似于网络程序员拒绝支持流行的旧版浏览器，因为他们不想鼓励使用它们。这样的程序员会被解雇，但是当你对一个流行的库拥有权力时，你可以侥幸把你的哲学强加给别人。弃用此功能会使想要禁用选择的程序员浪费时间寻找替代方法。通过惩罚作恶者，jQuery-UI 可能会让他们改变自己的方式，我们的社会也不会被禁用选择的网站所淹没。所以你看，有一个非常好的合理化，写“禁用文本选择是不好的。不要使用这个”。在官方文档中可以称自己为英雄。我们是这里的坏人。

【讨论】：

同意，但这不是一个答案，而是更多的评论。欢迎使用 StackOverflow！
更可笑的是，大多数 JQueryUI 示例都使用它！如果您在使用 JQueryUI 时碰巧遇到了这个问题，那么您可以在定义（例如）可排序项目时使用“包含”选项。 $( '#sortable1' ).sortable({ items: 'li:not(.ui-state-disabled)', 包含: 'parent' });

【解决方案2】：

我非常同意@WesleyMurch，希望我能给你更多的+1 :) 我也觉得，JS 不应该是前进的方向，css 可能会更好......，

如果您需要选择切换（在某些情况下如果是动态的），您可以使用 jquery 在类之间切换，（旧的 IE 浏览器）您可能会问？？？

嗯，这是阻止人们继续使用 OLD IE 的好方法（巧妙的工具）。因为他们错过了一些东西。

http://caniuse.com/#search=user-select

（虽然 IE 8/9 [从用户数量百分比来看] 是一个很大的数字，但这取决于您真正关心的程度）

我会像@Shmiddty 解释的那样使用 CSS 选项，但也许可以在您继续使用时启用和禁用，但这只是我的意见 :)

【讨论】：

【解决方案3】：

作为 CSS user-select: none; 技术的替代方案，我认为通过 $(document).on('dblclick mousedown', '.prevent-select', false); 简单地防止双击和鼠标按下时的默认行为具有一些优势：

仍然允许文本选择，如果用户想拖动光标围绕元素。只是防止用户快速点击时烦人的文本选择。
更好的浏览器支持。
不被 jQuery 团队弃用（代码审查中没有恶意。）

【讨论】：

【解决方案4】：

您可以在大多数浏览器中使用 CSS 来完成此操作：http://jsfiddle.net/fQthQ/

* {
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.selectable {
   -ms-user-select: auto;
   -moz-user-select: auto;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   user-select: auto;
}

Opera 目前不支持此功能。

查看 MDN 页面了解更多信息：https://developer.mozilla.org/en-US/docs/CSS/user-select

【讨论】：

这绝对有帮助。我希望 .disableSelection() 的 jQuery UI 页面提到这个作为替代方案（或者详细说明为什么它们也不支持用户选择）。
要在 Firefox 中再次选择，您必须设置 -moz-user-select: text