Come posso fare elementi MOLTI selezionabile utilizzando jQuery o CSS?

Question

Eventuali duplicati:
Is there a way to make a DIV unselectable?

ho visto un certo numero di soluzioni là fuori che lavoro per un elemento. Tuttavia ho un'area con etichette e pulsanti. Non è solo un elemento è ogni elemento all'interno di una DIV.

Come posso fare qualsiasi cosa contenuta all'interno di tale DIV unselectable? Si noti che non si può semplicemente mettere un livello maschera sopra il DIV come DIV ha pulsanti ho bisogno di essere in grado di fare clic.

Answer 1

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

Questo è nel caso in cui si desidera disabilitare la selezione utilizzando il CSS user-select proprietà. In caso contrario, quanto sopra può essere facilmente generalizzato ad altri metodi.

È possibile che seleziona solo i figli diretti, per selezionare tutti discendenti, utilizzare il metodo .find():

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

si può anche fare questo usando CSS puro:

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

Oppure:

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

Riferimento:

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

Answer 3

I user-select variazioni CSS proprietarie sono inher in tutti i browser che li supportano. Vedere questo esempio:

http://jsfiddle.net/yD7bM/

Il tuo problema è il browser che non supportano queste proprietà CSS, vale a dire l'Opera e IE < = 9. Fortunatamente entrambe queste attuare un'alternativa: il unselectable attribute. Tuttavia, è questo attributo che non è ereditato.

La soluzione migliore consiste nel mettere un attributo unselectable="on" su ogni elemento da rendere non selezionabile nell'HTML (ad esempio, lato server). Tuttavia, se questo non è un'opzione, è possibile farlo utilizzando JavaScript utilizzando a recursive function.

Se stai usando jQuery si potrebbe fare qualcosa di simile per aggiungere l'attributo unselectable ad ogni elemento con classe "selezionabile" e tutti i suoi discendenti:

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

Demo: http://jsbin.com/ulazic/2