javascriptsiblingsmousedown

mousedown. propagation on siblings event.targets


image

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.)


Solution

  • 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
    }