如何将点击事件映射到多层中的元素？

Question

我有多个 SVG 元素，它们位于不同的组中。它们相互重叠。例子：

<svg id="board" width="100%" height="80%">
   <g id="terrain" class="layer">
     <path d="M-32,-32L32,-32 32,32 -32,32Z" transform="translate(0, 0)" class="mote terrain hill"></path>
   </g>
   <g id="guy" class="layer">
     <path d="M-21...Z" transform="translate(192, 448)" class="mote guy"></path>
   </g>
</svg>

当单击与两者匹配的 x、y 位置时，我想知道两者都被单击的所有内容。如果我将每个事件绑定到“单击”事件，则只会调用顶部事件处理程序。这是合理的，尽管不是我想要的。

我正在考虑创建一个最顶层并让它捕获所有点击，然后找出应该通知其他层中的哪些元素。如果可能的话，我想避免大量的跟踪。有更简单的方法吗？

Answer 1

来自SVG 规范

“默认情况下，不得在形状的剪切（不可见）区域上调度指针事件。例如，将半径为 10 的圆剪切到半径为 5 的圆上将不会收到“单击” ’较小半径之外的事件。SVG 的更高版本可能会定义新的属性，以实现对命中测试和剪切之间的交互的细粒度控制。”

然而，有一种方法可以获取在特定点相交的 svg 形状列表。“getIntersectionList”函数返回项目列表。

我已经创建了 jsfiddle 的其中一个东西jsfiddle.net/uKVVg/1/ 单击圆圈的交集以获取 ID 列表。手动将事件发送到该列表。

JavaScript如下：

function s$(a) {
    return document.getElementById(a);
}

var list 

function hoverElement(evt) {
    var root = s$("canvas");

    var disp = s$("pointer");
    disp.setAttribute("x",evt.clientX);
    disp.setAttribute("y",evt.clientY);

    rpos = root.createSVGRect();
    rpos.x = evt.clientX;
    rpos.y = evt.clientY;
    rpos.width = rpos.height = 1;
    list = root.getIntersectionList(rpos, null);
    s = "clicked: "
    $.each(list,function(item,val){
        if (val.id != "pointer") {
            s = s + (val.id) + " ";
        }
    })
    alert(s);
}

var root = s$("canvas");
root.addEventListener("click", hoverElement, false);

有一些 javascript 可能可以整理，但希望它能回答你的问题。