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

我有多个独立组的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'事件，只有顶部的事件处理程序被调用。这是合理的，虽然不是我想要的。

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

来源

2013-11-27 Jim

您提出的解决方案对我来说听起来是正确的;因为元素是兄弟姐妹，事件不会通过它们冒泡，所以您需要捕获委托事件并确定哪些元素受到影响。 – Mathletics

此问题已答复[here]（http://stackoverflow.com/questions/3735278/how-to-get-a-list-of-all-elements-that-resides-at-the-clickedpoint ） – johnsoe

问题还没有得到解答。 – seanyboy

从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代码也许可以收拾，但希望它回答你的问题。

来源

2013-11-27 22:31:26 seanyboy

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

回答

相关问题