是否有办法使DIV不可选?-IsthereawaytomakeaDIVunselectable?

161  

I wrote a simple jQuery extension to disable selection some time back: Disabling Selection in jQuery. You can invoke it through $('.button').disableSelection();

我编写了一个简单的jQuery扩展来禁用选择:禁用jQuery中的选择。可以通过$('.button').disableSelection()调用它;

Alternately, using CSS (cross-browser):

此外,使用CSS(浏览器):

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

55  

The following CSS code works almost modern browser:

下面的CSS代码几乎适用于现代浏览器:

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

For IE, you must use JS or insert attribute in html tag.

对于IE，您必须在html标记中使用JS或插入属性。

...

33  

Just updating aleemb's original, much-upvoted answer with a couple of additions to the css.

只是更新了aleemb的原始的，多次投票的答案，添加了一些css。

We've been using the following combo:

我们一直在使用以下的组合:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

We got the suggestion for adding the webkit-touch entry from:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

我们得到了添加webkit-touch条目的建议:http://phonegap-tips.com/articles/essential-phonegap-css-webkit- touchcallout .html。

2015 Apr: Just updating my own answer with a variation that may come in handy. If you need to make the DIV selectable/unselectable on the fly and are willing to use Modernizr, the following works neatly in Javascript:

2015年4月:只更新我自己的答案和一个可能派上用场的变化。如果您需要动态地让DIV可选/不可选，并且愿意使用Modernizr，下面的代码可以在Javascript中很好地工作:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

22  

As Johannes has already suggested, a background-image is probally the best way to achieve this in CSS alone.

正如Johannes已经指出的那样，一个背景图像是实现这一目标的最佳方式。

A Javascript solution would also have to affect "dragstart" to be effective across all popular browsers.

Javascript解决方案还必须影响“dragstart”在所有流行浏览器上的有效性。

Javascript:

Javascript:

your text

jQuery:

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Rich

丰富的

8  

you can try this:

你可以试试这个:

your text

6  

Wouldn't a simple background image for the textarea suffice?

一个简单的背景图片是否足够?

4  

You can use pointer-events: none; in your CSS

可以使用pointerevents: none;在你的CSS

div {
  pointer-events: none;
}

3  

WebKit browsers (ie Google Chrome and Safari) have a CSS solution similar to Mozilla's -moz-user-select:none

WebKit浏览器(ie谷歌Chrome和Safari)有一个CSS解决方案，类似于Mozilla的- moz-userselect:none

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

2  

Also in IOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add css:

在IOS中，如果你想摆脱灰色半透明的覆盖，添加css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

0  

Use

使用

Onselectstart="return false"

Onselectstart= "返回false "

it prevents copying your content.

它可以防止复制您的内容。

0  

Make sure that you set position explicitly as absolute or relative for z-index to work for selection. I had a similar issue and this solved it for me.

确保将位置显式设置为绝对或相对，以便z-index用于选择。我也遇到过类似的问题，这个问题帮我解决了。

0  

Not sure of your use case, but you could make it draggable.

不确定您的用例，但是您可以使它可拖动。