使用 jQuery 显示/隐藏内容时出现奇怪的 div 选择答案

【问题标题】：Strange div selection when showing/hiding a content with jQuery使用 jQuery 显示/隐藏内容时出现奇怪的 div 选择
【发布时间】：2012-09-19 10:36:53
【问题描述】：

有一个小按钮，点击后会显示一些额外的内容。当我快速单击或多次单击时，显示的内容被标记为已选中：

jquery show effect 动画结束后，该选择消失。黑色箭头指向按钮。

知道为什么会有这种选择以及如何避免它吗？

【问题讨论】：

如果你绑定一个 dblclick 处理程序并在其中执行 event.preventDefault 呢？

标签： jquery html css

【解决方案1】：

当您快速单击时，您可能会稍微移动一下鼠标，这会让您选择项目。尝试使用

document.selection.empty();

和（不适用于所有浏览器）

window.getSelection().removeAllRanges();

清除选择。

来源：Clear a selection in Firefox

【讨论】：

哇，有帮助，但还是有一些选择，很奇怪，但是足够好

【解决方案2】：

您也可以将set the highlight-color 与容器的背景相同，然后如果它被选中，您实际上不会注意到..？

【讨论】：

【解决方案3】：

您还可以使用 CSS 使按钮不可选，这将禁用浏览器的文本选择。我不确定您的按钮 css 样式到底是什么样的，但这样的东西应该可以工作：

button {
    ...
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

【讨论】：