ratón hacia abajo. Propagación en eventos de hermanos. Targets

Question

Tengo 2 nodos hermanos con 'Posición Absoluta' que manejan el evento Mousedown. ¿Cómo puedo activar el controlador de 'Div 1' cuando haga clic en el área transparente del 'Div 2' (en la foto)?

Answer 1

Si los elementos superpuestos son dinámicos, no creo que sea posible lograr esto utilizando burbujas de eventos regulares ya que los dos elementos superpuestos en cuestión son "hermanos".

Tuve el mismo problema y pude resolverlo con más de un escenario más exigente donde pruebo si la posición del mouse del usuario está dentro de la misma área.

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

Querrá usar 3 manejadores de eventos, uno para Div1, uno para DIV2 y otro para ContentArea. El controlador ContentArea debe detener la propagación para que no se llame al controlador DIV2. El controlador Div2 debe llamar al controlador Div1:

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;