getSelection() by Double Click or manual selection is not the same

Question

Hi all,

I allow me to ask a question, because I have a little probleme with an function which returns me the parent of a selection.

$('input[type=button].btn_transform').click(function(){        

    var selectionObj = getSelected();//Function which gives me selection

    var theParent=selectionObj.anchorNode.parentNode;
    alert (theParent);    
})

For example with this sentence : "the cat is <strong>gray</strong>."

If I select manually the word "gray" and click on my button, the function returns me [object HTMLSpanElement].

But if I select the same word by double clicking, the function returns me [object HTMLParagraphElement].

Do you know why ?

Thanks a lot.

Answer 1

The mouse selecting is creating a selection that encompasses all of but entirely lives inside the text node with text "gray". Double clicking is creating a selection that includes the whole of the <strong> element containing that text node. There may be no visual difference but the difference exists, as reflected in the anchorNode, anchorOffset, focusNode and focusOffset properties of the selection (or any Range you obtain from the selection). If pipes represent the selection boundaries, what you have is the following:

Mouse selection:

the cat is <strong>|gray|</strong>

Double click selection:

the cat is |<strong>gray</strong>|