jquery - 使用 jQuery 显示/隐藏内容时奇怪的 div 选择

Question

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

当 jquery show effect 的动画完成时，此选择消失。黑色箭头指向按钮。

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

Answer 1

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

document.selection.empty();

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

window.getSelection().removeAllRanges();

清除选择。

来源：清除 Firefox 中的选择

Answer 2

您还可以将突出显示颜色设置为与容器的背景相同，然后如果它确实被选中，您实际上不会注意到..？

Answer 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;
}