如何检测svg上的鼠标事件？

Question

我有地图的样子：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="rootMap" version="1.2" baseProfile="tiny" zoomAndPan="disable" viewBox="0 0 327 273"> 
<style> 
    path, rect{fill: #fff;stroke: #000;cursor: crosshair;}  
</style> 
<script> 
    function test(evt){ 
     alert(evt.target.id); 
    } 
</script> 
<svg x="0" y="0" onclick="test(evt)" width="327" height="273" viewBox="596302 -1188413 45 38"> 
    <g> 
     <g> 
      <g> 
       <rect x="596302" y="-1188413" width="30" height="30" id="2"/> 
      </g> 
     </g> 
    </g> 
</svg> 
<svg x="0" y="0" onclick="test(evt)" width="327" height="273" viewBox="50000 -600000 327 273"> 
    <g> 
     <g> 
      <g> 
       <rect x="50000" y="-600000" width="100" height="50" id="1"/> 
      </g> 
     </g> 
    </g> 
</svg> 

我想到的是点击任意矩形时，功能测试将被调用。但是，当单击矩形＃1是真时，矩形2没有被调用。为什么？

Answer 1

在您的示例中，矩形＃1位于矩形＃2之上。当点击两个或多个元素重叠的点时，onclick处理程序仅针对最上面的元素进行调用。这是有意义的，因为最顶端的元素覆盖（即隐藏）其他元素。