JQuery 1.8では、これは次のように実行できます。
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);
JQuery UIを使用する場合、そのためのメソッドがありますが、マウスの選択しか処理できません（つまり、 CTRL+A まだ機能しています）：
$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9
JQuery UIを使用したくない場合、コードは本当に簡単です：
$(el).attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none', /* you could also put this in a class */
'-webkit-user-select':'none',/* and add the CSS class here instead */
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){ return false; });
この回答（ テキストテーブルのハイライトを防ぐ ）が最も役に立ちました。おそらく、IE互換性を提供する別の方法と組み合わせることができます。
#yourTable
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
切断の選択と、いくつかのホットキーのキャンセル（たとえば、 Ctrl+a そして Ctrl+c。 テスト： Cmd+a そして Cmd+c）
(function($){
$.fn.ctrlCmd = function(key) {
var allowDefault = true;
if (!$.isArray(key)) {
key = [key];
}
return this.keydown(function(e) {
for (var i = 0, l = key.length; i < l; i++) {
if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
allowDefault = false;
}
};
return allowDefault;
});
};
$.fn.disableSelection = function() {
this.ctrlCmd(['a', 'c']);
return this.attr('unselectable', 'on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none',
'user-select':'none'})
.bind('selectstart', false);
};
})(jQuery);
呼び出し例：
$(':not(input,select,textarea)').disableSelection();
これは、古いバージョンのFireFoxには十分ではない可能性があります（どのバージョンかはわかりません）。これがすべて機能しない場合は、次を追加します。
.on('mousedown', false)
以下は、すべての一般的なブラウザ（IE、Chrome、Mozilla、OperaおよびSafari）のすべてのクラス「アイテム」の選択を無効にします。
$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
$(document).ready(function(){
$("body").css("-webkit-user-select","none");
$("body").css("-moz-user-select","none");
$("body").css("-ms-user-select","none");
$("body").css("-o-user-select","none");
$("body").css("user-select","none");
});
これはJavaScriptを使用して簡単に実行できますこれはすべてのブラウザに適用可能です
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
target.style.MozUserSelect="none"
else //All other route (For Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
この関数の呼び出し
<script type="text/javascript">
disableSelection(document.body)
</script>
これは実際には非常に簡単です。テキストの選択を無効にする（およびテキスト（Chromeのリンクなど）をクリックしてドラッグする）には、次のjQueryコードを使用します。
$('body, html').mousedown(function(event) {
event.preventDefault();
});
これはすべて、bodyおよびhtmlタグでマウス（mousedown()）をクリックしたときにデフォルトが発生しないようにすることです。 2つの引用符の間にあるテキストを変更するだけで、非常に簡単に要素を変更できます（たとえば、$('body, html')を$('#myUnselectableDiv')に変更して、myUnselectableDiv divを選択できないようにします）。
これを表示/証明するための簡単なスニペット：
$('#no-select').mousedown(function(event) {
event.preventDefault();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>この効果は完璧ではなく、ウィンドウ全体を選択できない状態で最高のパフォーマンスを発揮することに注意してください。追加することもできます
一部のホットキーのキャンセル（など） Ctrl+a そして Ctrl+c。 テスト： Cmd+a そして Cmd+c）
同様に、上記のウラジミールの答えのそのセクションを使用して。 （彼の投稿にアクセス ここ ）
このコードはすべてのブラウザで動作するであり、必要なオーバーヘッドは最小だと思います。これは、上記のすべての答えのハイブリッドです。バグを見つけたら教えてください！
CSSを追加：
.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}
jQueryを追加：
(function($){
$.fn.disableSelection = function()
{
$(this).addClass('no_select');
if($.browser.msie)
{
$(this).attr('unselectable', 'on').on('selectstart', false);
}
return this;
};
})(jQuery);
オプション：すべての子要素の選択も無効にするには、IEブロックを次のように変更できます。
$(this).each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
使用法：
$('.someclasshere').disableSelection();
CHROMEの1行ソリューション：
body.style.webkitUserSelect = "none";
およびFF：
body.style.MozUserSelect = "none";
IEでは、「選択不可」属性を設定する必要があります（詳細は下部にあります）。
Chromeでこれをテストしましたが、動作します。このプロパティは継承されるため、body要素に設定すると、ドキュメント全体で選択が無効になります。
詳細はこちら： http://help.dottoro.com/ljrlukea.php
クロージャーを使用している場合は、この関数を呼び出すだけです：
goog.style.setUnselectable(myElement, true);
すべてのブラウザを透過的に処理します。
IE以外のブラウザは次のように処理されます。
goog.style.unselectableStyle_ =
goog.userAgent.GECKO ? 'MozUserSelect' :
goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
null;
IE部分は次のように処理されます。
if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
for (var i = 0, descendant; descendant = descendants[i]; i++) {
descendant.setAttribute('unselectable', value);
}
}
私はすべてのアプローチを試しましたが、これはIWebBrowser2を使用しており、10個のブラウザーと競合することがないため、これが最も簡単です。
document.onselectstart = new Function('return false;');
私にぴったりです！
これに対する適切な解決策の1つは、選択できないようにするテキストに<button>を使用することです。一部のテキストブロックでclickイベントにバインドし、そのテキストを選択可能にしたくない場合、ボタンに変更するとセマンティクスが向上し、テキストが選択されなくなります。
<button>Text Here</button>