I am working on an application that keeps track of edits in a contenteditable section of an HTML page. When something is inserted, this content is wrapped inside a span with class inserted. So far, so good. But I need to keep track of where the text cursor is inside the contenteditable area (which might have multiple spans inside).

Here is a small section of html that I am using to test my code (only the relevant portion of the page is shown here):

<p id="p1">
    <span id="p1s1">This manual is about</span>
    <span id="p1s2" class="inserted"> product X</span>
    <span id="p1s3" class="deleted"> something</span><span id="p1s4">.</span>
</p>

When I click right after the word 'product' the result is as expected: the anchorNode is identical to the focusNode and shows the ID 'p1s2' with an offset 8. Clicking after the p of product shows offset 2. But clicking in front of the 'p' gives me an offset of 1 but an ID 'p1' - which is the parent of the node in which I clicked.

I tested this with the latest versions of Chrome and Safari and both browsers show the same result. Is this intended behaviour and why do I not get the ID of the span if I clearly click inside its content ?