Question

I have 2 sibling-nodes with ‘position absolute’ which both handle mousedown event. How can I trigger the handler of ‘div 1’ when I am clicking on the transparent area of the ‘div 2’ (on the pic.)

Answer 1

If the overlapping elements are dynamic, I don’t believe it is possible to accomplish this using regular event bubbling since the two overlapping elements in question are “siblings”.

I had the same problem and I was able to solve it with more of a hitTest scenerio where I test if the user’s mouse position 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
}