鼠标按下。传播给兄弟姐妹event.targets

Question

我有两个带有'position absolute'的兄弟节点，它们都处理mousedown事件。当我点击'div 2'的透明区域（在图片上）时，如何触发'div 1'的处理程序。

Answer 1

如果重叠元素是动态的，我不相信使用常规事件冒泡可以实现这一点，因为所讨论的两个重叠元素是“兄弟姐妹”。

我遇到了同样的问题，我可以用更多的hitTest scenerio来解决它，我测试用户的鼠标位置是否在同一区域内。

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

您将需要使用3个事件处理程序，一个用于div1，一个用于div2，另一个用于contentArea。 contentArea处理程序应该停止传播，以便不调用div2处理程序。 div2处理程序应该调用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;