Question

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

有没有办法实现

的效果

onselectstart = "return false;"

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

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

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

 -moz-user-select:none;

Answer 1

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

这真的是一个链接吗？通常您无法选择链接文字。

如果你正在使用eg。一个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;

使用CSS或其他非JS方法模仿“onselectstart = return false”？

1 个答案: