如何将点击事件映射到多个图层中的元素？ [英] How can I map click events to elements in multiple layers?

问题描述

我有多个SVG元素在不同的组中。它们相互重叠。示例：

I have multiple SVG elements that are in separate groups. They overlap each other. Example:

<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位置时，我想知道所有被点击的位置。如果我将每个绑定到'click'事件，则只调用顶部的事件处理程序。这是合理的，虽然不是我想要的。

When an x, y position that matches both is clicked, I want to know all that both were clicked. If I bind each to the 'click' event, only the event handlers for one on top gets called. Which is reasonable, although not what I want here.

我正在考虑创建一个最顶层并抓住所有点击，然后找出另一个中的哪些元素应通知图层。如果可能的话，这是我想要避免的大量跟踪。是否有更简单的方法？

I'm thinking of creating a topmost layer and having that catch all clicks, then figure out which elements in the other layers should be notified. That's a lot of tracking that I'd like to avoid, if possible. Are there simpler approaches to this?

推荐答案

来自 SVG规范

默认情况下，不得在剪裁上调度指针事件（非 - 可见的）形状区域。例如，半径为10的圆被剪切为半径为5的圆将不会在较小半径之外接收点击事件。更高版本的SVG可以定义新属性能够对命中测试和裁剪之间的相互作用进行细粒度控制。

"By default, pointer-events must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive 'click' events outside the smaller radius. Later versions of SVG may define new properties to enable fine-grained control over the interactions between hit testing and clipping."

但是，有一种方法可以获得在特定点相交的svg形状列表。 getIntersectionList函数返回项列表。

However, there is a way of getting a list of svg shapes that intersect at a particular point. The "getIntersectionList" function returns a list of items.

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

I've created one of those jsfiddle things jsfiddle.net/uKVVg/1/ Click on the intersection of the circles to get a list of ID's. Manually send events to that list.

Javascript如下：

Javascript follows:

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可能会被整理，但希望它能回答你的问题。

There's some javascript that could probably be tidied up, but hopefully it answers your question.

这篇关于如何将点击事件映射到多个图层中的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！