¿Cómo puedo hacer que MUCHOS elementos no se puedan seleccionar usando jQuery o CSS?

Question

Duplicar posible:
Is there a way to make a DIV unselectable?

he visto una serie de soluciones por ahí que el trabajo de un elemento. Sin embargo, tengo un área con etiquetas y botones. No es solo un elemento, es cada elemento dentro de un DIV.

¿Cómo puedo hacer que todo lo contenido en ese DIV se pueda seleccionar? Tenga en cuenta que no puedo simplemente poner una capa de máscara sobre el DIV ya que el DIV tiene botones en los que necesito poder hacer clic.

Answer 1

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

Eso es en caso de que desee deshabilitar la selección utilizando el CSS user-select propiedad. Si no, lo anterior se puede generalizar fácilmente a otros métodos.

Lo anterior sólo selecciona los hijos directos, para seleccionar todos descendientes, utilice el .find() método:

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

También puede hacerlo usando CSS puro:

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

O:

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

Referencia:

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

Answer 3

Los propietarios user-select variaciones CSS son inher ited en todos los navegadores que los admiten. Vea este ejemplo:

http://jsfiddle.net/yD7bM/

Su problema es que los navegadores que no soportan estas propiedades CSS, a saber, Opera e IE < = 9. Por suerte ambos implementar una alternativa: la unselectable attribute. Sin embargo, es este atributo que no se hereda.

La mejor solución es poner un atributo unselectable="on" en cada elemento que requiera para que no se pueda seleccionar en el HTML (es decir, hágalo en el lado del servidor). Sin embargo, si esto no es una opción, puede hacerlo usando JavaScript usando a recursive function.

Si estás usando jQuery que podría hacer algo como esto para añadir el atributo unselectable a cada elemento con la clase "no seleccionable" y todos sus descendientes:

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

Demostración: http://jsbin.com/ulazic/2