模仿“onselectstart = return false”使用CSS还是其他非JS方法？ [英] Imitate "onselectstart=return false" using CSS or other non-JS approach?

问题描述

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

I have created a button CSS class that uses background images with different positions to display a different image on normal, mouseover, and click states. One thing completely destroying the visual effect is that if I click such a link repeatedly and move the mouse just a pixel, the link text gets selected.

是否有实现

onselectstart = "return false;"

而不必为每个按钮指定？基于CSS的解决方案将是完美的，但我不能想到一个。任何想法？

without having to specify that for each button? A CSS based solution would be perfect, but I can't think of one. Any ideas?

一种方法是使用原型或JQuery对每个button元素进行迭代，并手动设置onselectstart事件。

One way would be iterating through each "button" element using prototype or JQuery and setting the onselectstart event manually. However I am allergic to Javascript when not absolutely necessary, and would appreciate any non-JS ideas.

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

I have found a solution for Mozilla browsers:

 -moz-user-select:none;

推荐答案

视觉效果是，如果我重复点击这样的链接并移动鼠标只是一个像素，链接文本被选中。

One thing completely destroying the visual effect is that if I click such a link repeatedly and move the mouse just a pixel, the link text gets selected.

它真的是一个链接？通常您不能选择链接文本。

Is it really a link? Normally you cannot select link text.

如果您使用eg。一个div作为虚假链接，也许你应该使用一个链接（如果它去某个地方有一个真正的href），或者一个输入按钮，如果它只是为了脚本（虽然这需要一些样式丢失浏览器默认样式，

If you are using eg. a div as a faux-link, perhaps you ought to use a link instead (if it goes somewhere with a real href), or an input-button if it's just for scripting (although this requires some styling to lose the browser default styles, which is a bit of a pain).

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

Otherwise, Safari/Chrome/Konqueror replicates Mozilla's property under its own name:

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

对于其他浏览器，您需要一个JavaScript解决方案。注意 onselectstart 返回false仅在IE和Safari / Chrome中足够;对于Mozilla和Opera，还必须返回false onmousedown 。这也可能会阻止点击，所以你必须在 mousedown 处理程序返回false之前，而不是 onclick 。

For other browsers you need a JavaScript solution. Note onselectstart returning false is only sufficient in IE and Safari/Chrome; for Mozilla and Opera one would also have to return false onmousedown. This may also stop the click firing, so you would have to do whatever script stuff you have planned for the button in the mousedown handler before returning false, rather than 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;

这篇关于模仿“onselectstart = return false”使用CSS还是其他非JS方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！