使用CSS或其他非JS方法模仿“onselectstart = return false”？(Imitate “onselectstart=return false” using CSS or oth

使用CSS或其他非JS方法模仿“onselectstart = return false”？(Imitate “onselectstart=return false” using CSS or other non-JS approach? [duplicate])

这个问题在这里已经有了答案：

有没有办法让DIV无法选择？ 12个答案

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

有没有办法达到效果？

onselectstart = "return false;"

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

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

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

-moz-user-select:none;

This question already has an answer here:

Is there a way to make a DIV unselectable? 12 answers

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.

Is there a way to achieve the effect of

onselectstart = "return false;"

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

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.

Edit: I have found a solution for Mozilla browsers:

-moz-user-select:none;

最满意答案

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

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

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

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

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

对于其他浏览器，您需要一个JavaScript解决方案。 注意onselectstart返回false仅适用于IE和Safari / Chrome; 对于Mozilla和Opera来说，人们也必须返回错误的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;

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.

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).

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

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

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.

You can of course assign those handlers from script, to avoid messing up the markup, eg.:

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