javascript - ¿Cómo permitir la selección de texto de un DIV, pero prevenir la selección de texto del DIV padre?

Me gustaría permitir que los usuarios seleccionen texto que se encuentra en varios DIVs que están ubicados uno después del otro con pequeños espacios entre ellos. El problema es que, cuando el usuario arrastra el ratón para realizar la selección, pasa sobre los "espacios", lo que provoca que todo el DIV padre se seleccione momentáneamente, hasta que ingresan en el siguiente DIV hijo. Esto causa un comportamiento de "parpadeo" y mala experiencia de usuario, porque el DIV padre también tiene imágenes, y por un momento, todas las imágenes también se seleccionan. Intenté varios métodos sugeridos en este foro, incluyendo: -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; unselectable=on, y sobreescribir el evento onselectstart: return false; Desafortunadamente, si deshabilito la selección de texto en el DIV padre, todos los DIV hijos inmediatamente adoptan ese comportamiento, y eso no es lo que quería decir. Quiero que el DIV padre no pueda ser seleccionado, pero que sus hijos sí puedan. Gracias

Actualizar :

El "onselectstart" se llama solo para el DIV principal (y los spans/párrafos debajo de él), pero NO se llama cuando se selecciona la imagen. Por lo tanto, intentar manipularlo y usar "return false;" no es relevante; la imagen simplemente no recibirá ese evento.

Respuesta #1

La propiedad unselectable de IE expando hace esto automáticamente; no se hereda. Para otros navegadores, usa una regla CSS adicional. Suponiendo el siguiente HTML:

<div class="unselectable" unselectable="on">
    Some unselectable text
    <div>Some selectable text</div>
    Some more unselectable text
</div>

Usa el siguiente CSS. Esto define una regla adicional que habilita específicamente la selección de texto para los descendientes de elementos no seleccionables:

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

*.unselectable * {
   -moz-user-select: text;
   -khtml-user-select: text;
   -webkit-user-select: text;
   -o-user-select: text;
   user-select: text;
}

Respuesta #2

-moz-user-select: -moz-none - El texto del elemento y de los subelementos no puede ser seleccionado, pero la selección puede habilitarse en los subelementos usando -moz-user-select:text.

Establecer -webkit-user-select: text para los hijos.

El atributo no seleccionable no se hereda.

Establece onselectstart=null para los elementos hijos, o si estás usando escuchadores, verifica el objetivo antes de devolver false.