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

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 位置时，我想知道两者都被单击的所有内容。如果我将每个都绑定(bind)到“点击”事件，则只会调用最上面一个的事件处理程序。这是合理的，尽管这不是我想要的。

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

Answer 1

来自SVG spec

“默认情况下，不得在形状的裁剪(不可见)区域上分派(dispatch)指针事件。例如，半径为 10 的圆被裁剪为半径为 5 的圆不会接收较小半径之外的“点击”事件。SVG 的更高版本可能会定义新的属性，以实现对 HitTest 和裁剪之间交互的细粒度控制。”

但是，有一种方法可以获取在特定点相交的 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 可能可以整理一下，但希望它能回答您的问题。