Is it possible to distinguish between click and selection?

I have a div with a hidden child. Clicking in the div will toggle the visibility of the child. This works well.

Now the user wants to select some text in the child. Dragging the selection works but as soon as the mouse button is released, the div closes (because of the inClick handler).

If pos开发者_运维知识库sible, I'd still like to be able to close the div from anywhere in the child because the child can be quite large (hundreds of lines, so it would be tedious to scroll to the div to toggle the child).

Needs to work with IE6+ and all sane browsers. I can't use jQuery directly :-( but I can copy code from jQuery so if jQuery had a solution, I clone it.

Suggestions?

You can do a check on window.getSelection() to see if it contains anything before closing your inner div.

For IE6 you'll want to substitute this with document.selection.

Note that this is proprietry to IE so you'll want to distinguish which method to use via object detection.

Working Demo

You could have a toggle control on the side of the DIV:

toggle.onclick = function () { 
    if ( this.className === 'closed' ) {
        this.className = '';
        content.style.display = '';
    } else {
        this.className = 'closed';
        content.style.display = 'none';
    }
};

Live demo: http://jsfiddle.net/HcVfW/