5

重複の可能性：
DIVを選択不可にする方法はありますか？

私は、要素に対して機能する多くの解決策を見てきました。ただし、ラベルとボタンのある領域があります。これは1つの要素だけではなく、内のすべての要素DIVです。

DIVその中に含まれているものを選択不可にするにはどうすればよいですか？クリックできるようにする必要のあるボタンがあるためDIV、マスクレイヤーを単に上に置くことはできないことに注意してください。DIV

4

3 に答える 3

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

user-selectこれは、CSSプロパティを使用して選択を無効にする場合です。そうでない場合、上記は他の方法に簡単に一般化できます。

上記は直接の子のみを選択します。すべての子孫を選択するには、次の.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*/
}
于 2012-10-07T14:15:33.370 に答える
1

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>

参照：

于 2012-10-07T14:20:49.897 に答える
1

独自のuser-selectCSS バリエーションは、それらをサポートするすべてのブラウザーで継承されます。次の例を参照してください。

http://jsfiddle.net/yD7bM/

問題は、これらの CSS プロパティをサポートしていないブラウザー、つまり Opera と IE <= 9 です。幸いなことに、これらは両方とも代替手段を実装しています:unselectable属性。ただし、継承されないのはこの属性です。

最善の解決策はunselectable="on"、HTML で選択できないようにする必要があるすべての要素に属性を配置することです (つまり、サーバー側で行います)。ただし、これがオプションでない場合は、再帰関数を使用して JavaScript を使用して実行できます。

jQuery を使用している場合は、次のようにして、unselectable「選択不可」クラスの各要素とそのすべての子孫に属性を追加できます。

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

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

于 2012-10-07T15:46:52.457 に答える