Q:

Detecting if mouse click is before or after an element

I'm trying to insert an content at the position a mouse is clicked.  Looking at the following:
<div id="parentDiv">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

I know I can get the div that was clicked on with code like this:
function handleMouseClickEvent(e) {
    var evt = e ? e:window.event;
    var targ = evt.target ? evt.target:evt.srcElement;
}

However if someone clicks in between div1 and div2 then the targ will be parentDiv.  
Is there a way to detect that the click was before or after a child element so I can insert content at the exact place that was clicked?

A:

You need to use the coordinates of the click to do the check.
Instead of handling the event on the item you can handle the event on the container and the iterate over the children and checking child.offsetTop and child.offsetHeight to find the first child that starts after the mouse click.
Once you know that you can decide if you want to consider that click a click on the child, or a click between e child and next or previous one e.g. by considering

y < child.offsetTop + child.offsetHeight*0.1 between child and previous
y > child.offsetTop + child.offsetHeight*0.9 between child and next
otherwise is a click on the child

