Mousedown. spreading event.targets on siblings

Question

I have 2 siblings with "position absolute" that handle the mousedown event. How can I call the "div 1" handler when I click on the transparent area of ​​"div 2" (in the figure).

Answer 1

If the overlapping elements are dynamic, I don’t think that this can be done using a normal bubble event, since the two duplicate elements in question are “siblings”.

I had the same problem and I was able to solve it with more hitTest vulnerabilities, where I check if the user position of the mouse is within the same area.

function _isMouseOverMe(obj){
    var t = obj.offset().top;
    var o = obj.offset().left;
    var w = obj.width();
    var h = obj.height();
    if (e.pageX >= o+1 && e.pageX <= o+w){
        if (e.pageY >= t+1 && e.pageY <= t+h){
            return true;
        }
    }
    return false
}

Answer 2

You want to use 3 event handlers, one for div1, one for div2 and one for contentArea. The contentArea handler must stop distributing so that the div2 handler is not called. The div2 handler should call the div1 handler:

function div1Click (e)
{
    // do something
}
function div2Click (e)
{
    div1Click.call(div1, e);
}
function contentAreaClick (e)
{
    e = e || window.event;
    if (e.stopPropagation) e.stopPropagation();
    e.cancelBubble = true;
    // do something
}
div1.onclick = div1Click;
div2.onclick = div2Click;
contentArea.onclick = contentAreaClick;