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

2023年4月9日 172次阅读

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

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

最佳答案 来自
SVG spec

“默认情况下,不能在形状的剪切(不可见)区域上调度指针事件.例如,半径为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可能可以整理,但希望它能回答你的问题.

点赞