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

Question

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

有没有办法达到效果

onselectstart = "return false;"

无需为每个按钮指定？基于CSS的解决方案将是完美的,但我想不出一个.有任何想法吗？

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

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

 -moz-user-select:none;

Answer 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触发,因此您必须mousedown在返回false之前执行您为处理程序中的按钮计划的任何脚本内容,而不是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;