使用 CSS 或其他非 JS 方法模仿“onselectstart=return false”？ [复制]答案

【问题标题】：Imitate "onselectstart=return false" using CSS or other non-JS approach? [duplicate]使用 CSS 或其他非 JS 方法模仿“onselectstart=return false”？ [复制]
【发布时间】：2009-10-28 13:39:04
【问题描述】：

我创建了一个按钮 CSS 类，它使用具有不同位置的背景图像在正常、鼠标悬停和单击状态下显示不同的图像。完全破坏视觉效果的一件事是，如果我反复单击这样的链接并将鼠标移动一个像素，则链接文本会被选中。

有没有办法实现的效果

onselectstart = "return false;"

不必为每个按钮指定？基于 CSS 的解决方案将是完美的，但我想不出一个。有什么想法吗？

一种方法是使用原型或 JQuery 遍历每个“按钮”元素并手动设置 onselectstart 事件。但是，我在非绝对必要时对 Javascript 过敏，并且会感谢任何非 JS 的想法。

编辑：我找到了 Mozilla 浏览器的解决方案：

 -moz-user-select:none;

【问题讨论】：

标签： javascript html css

【解决方案1】：

完全破坏视觉效果的一件事是，如果我反复单击此类链接并将鼠标移动一个像素，则链接文本会被选中。

真的是链接吗？通常你不能选择链接文本。

如果您正在使用例如。一个 div 作为一个假链接，也许你应该使用一个链接（如果它在某个地方有一个真正的 href），或者一个输入按钮，如果它只是用于脚本（尽管这需要一些样式来丢失浏览器的默认样式，这有点痛苦）。

否则，Safari/Chrome/Konqueror 会以自己的名称复制 Mozilla 的属性：

-webkit-user-select: none;
-khtml-user-select: none;

对于其他浏览器，您需要 JavaScript 解决方案。注意 onselectstart 返回 false 仅在 IE 和 Safari/Chrome 中就足够了；对于 Mozilla 和 Opera，还必须返回 false onmousedown。这也可能会停止 click 触发，因此您必须在返回 false 之前执行您为 mousedown 处理程序中的按钮计划的任何脚本内容，而不是 onclick。

您当然可以从脚本中分配这些处理程序，以避免弄乱标记，例如：

<div class="button">...</div>

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

function returnfalse() {
    return false;
}

var divs= document.getElementsByTagName('div');
for (var i= divs.length; i-->0;)
    div.onselectstart= returnfalse;

【讨论】：

非常漂亮和完整。谢谢！