How to allow text-selection of a DIV, but prevent the text-selection of the father DIV?

I would like to allow the users to select text that resides in multiple DIVs that are located one after the other with small gaps between them. the problem is, that when the user drags the mouse to perform the selection, they pass over the "gaps", which causes the whole parent DIV is selected momentarily, until they enter into the following child DIV. This causes "flickers" behaviour and bad user experience, becaus开发者_如何学编程e the parent DIV also has images, and for a moment, all of the images are being selected too. I tried several method suggested in this forum, including: -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; unselectable=on, and overriding the event onselectstart: return false; Unfortunately, if I were to disable selecting text in the parent DIV, all the children DIVs immediately adopted that behaviour, and that is not what I meant. I want that the parent DIV won't be selected, but its children will. Thanks

Update:

The "onselectstart" is called only for the parent DIV (and spans/paragraphs beneath it), but it is NOT called when the image is being selected. Therefore, trying to manipulate it and use "return false;" is not relevant; the image simply won't get that event.

IE's unselectable expando property does this for you automatically; it isn't inherited. For other browsers, use an extra CSS rule. Assuming the following HTML:

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

Use the following CSS. This defines an extra rule specifically enabling text selection for descendants of unselectable elements:

*.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;
}

-moz-user-select: -moz-none - The text of the element and sub-elements cannot be selected, but selection can be enabled on sub-elements using -moz-user-select:text.

Set -webkit-user-select: text for the children.

The unselectable attribute is not inherited.

Set onselectstart = null for the children, or if you are using listeners - check the target before returning false.

Hi Tim I want that the image won't be selected when performing multiline selection with the mouse. Your code works with Firefox, Chrome but not Ie8. This can be seen in my previous link. Great day