jQueryやCSSを使用してたくさんの要素を選択できないようにする方法はありますか？

Question

可能性の重複：
Is there a way to make a DIV unselectable?

私はそこに要素のためにその仕事を解の数を見てきました。しかし、私はラベルとボタンのある領域を持っています。 1つの要素だけではなく、DIVのすべての要素です。

その中に含まれるものをどのようにすることができますか？DIVは選択できません。 DIVには、クリックできるようにするボタンがあるため、マスクレイヤーをDIVに置くことはできません。

Answer 1

$(".yourdiv").children().css({userSelect: 'none'}); 

これは、CSS user-selectプロパティを使用して選択を無効にしたい場合です。もしそうでなければ、上記は他の方法に容易に一般化することができる。

上記のみ.find()メソッドを使用し、すべて子孫を選択するために、直接の子を選択します。

$(".yourdiv").find("*").css({userSelect: 'none'}); 

あなたはまた、純粋なCSSを使用してこれを行うことができます。

.yourdiv * { /*this selects all elements that are children of yourdiv*/ 
    /*user-select: none rules*/ 
} 

または：

を

.yourdiv > * { /*this selects all elements that are direct descendants of yourdiv*/ 
    /*user-select: none rules*/ 
} 

Answer 2

CSS：

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

HTML：

<div id="foo" class="unselectable">...</div> 

リファレンス：

• Is there a way to make a DIV unselectable?
• Disabling Selection in jQuery

Answer 3

独自01​​CSSの変動がinherありますそれらをサポートするすべてのブラウザでは、この例を参照してください：

http://jsfiddle.net/yD7bM/

あなたの問題は、これらのCSSのプロパティをサポートしていないブラウザ、すなわち、オペラやIE < = 9幸い、両方のこれらの代替実装です：unselectable attributeを。ただし、この属性は継承されません。

最も適切な解決策は、必要なすべての要素にunselectable="on"属性をHTMLで選択できないようにすることです（つまり、サーバー側で行うことをお勧めします）。ただし、これがオプションでない場合は、a recursive functionを使用してJavaScriptを使用して行うことができます。

あなたはjQueryのを使用している場合は、「選択不可能」クラスを使用して各要素にunselectable属性を追加するには、このような何かを行うとその子孫のすべての可能性：

$(".unselectable").find("*").andSelf().attr("unselectable", "on"); 

デモ：http://jsbin.com/ulazic/2