javascript - 在多个重叠的 SVG 元素上检测鼠标事件

Question

我正在尝试检测部分重叠的 SVG 元素上的 mousemove 事件，如图所示

fiddle

<svg>
    <rect id="red"    x=10 y=10 width=60 height=60 style="fill:#ff0000" />
    <rect id="orange" x=80 y=10 width=60 height=60 style="fill:#ffcc00" />
    <rect id="blue"   x=50 y=30 width=60 height=60 style="fill:#0000ff; fill-opacity: 0.8" />
</svg>

$('rect').on('mousemove', function()
{
    log(this.id);
});

现在，当将鼠标悬停在蓝色/红色交叉点上时，我想检测这两个元素上的鼠标事件，蓝色/橙色组合也是如此。正如您在日志中看到的那样，在这些情况下，当前仅针对位于顶部的蓝色框触发事件。

这与指针事件有关，因为我可以让红色和橙色元素触发事件，同时通过 setting the blue element's pointer-events to none 悬停蓝色元素| .但是我没有得到蓝色框的事件，所以这也不是一个可行的选择。

我会使用任何一个库来解决这个问题。我看着像 this d3 example 中的事件冒泡，但这只适用于嵌套在 DOM 中的元素。我有很多独立的元素，它们可能会与很多其他元素重叠，因此不能以这种方式构建我的 DOM。

我猜最后的手段是找到当前鼠标位置的元素，然后手动触发事件。因此，我查看了 document.elementFromPoint() ，但这只会产生 1 个元素(并且可能不适用于 SVG？)。我找到了 jQuerypp函数 within , 找到给定位置的元素，参见 here .这个例子看起来不错，除了它是 DIV 而不是在 SVG 中。当用 svg 矩形元素替换 div 时， fiddle 似乎是 break .

我该怎么办？!

Answer 1

这里的精彩评论给了我答案:可以通过使用 getIntersectionList() 找到它们来手动将事件传播到底层元素。在光标位置。

$('svg').on('mousemove', function(evt)
{
    var root = $('svg')[0];
    var rpos = root.createSVGRect();
    rpos.x = evt.clientX;
    rpos.y = evt.clientY;
    rpos.width = rpos.height = 1;
    var list = root.getIntersectionList(rpos, null);

    for(var i = 0; i < list.length; i++)
    {
        if(list[i] != evt.target)
        {
            $(list[i]).mousemove();
        }
    }
});

工作示例:http://jsfiddle.net/michaschwab/w0wufbtn/6/

如果其他监听器需要原始事件对象，请查看 http://jsfiddle.net/michaschwab/w0wufbtn/13/ .

非常感谢!!