Is it possible to distinguish between click and selection?

Question

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 possible, 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?

Jamie Dixon · Accepted Answer · 2011-09-27T14:46:36.593

1

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

edited Sep 27 '11 at 14:46

answered Sep 27 '11 at 14:37

Jamie Dixon

53,019
19
125
162

score 1 · Answer 2 · answered Sep 27 '11 at 14:43

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/

Is it possible to distinguish between click and selection?

2 Answers2