如何在svg上检测鼠标事件?

时间:2015-11-04 02:39:35

标签: svg

我的地图看起来像:

<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>

我希望当点击任何rect时,将调用函数测试。但是,如果单击rect#1为true,则不会调用rect#2。为什么呢?

1 个答案:

答案 0 :(得分:0)

在您的示例中,rect#1位于rect#2的顶部。单击两个或多个元素重叠的点时,仅为最顶层元素调用onclick处理程序。这是有道理的,因为最顶层的元素是覆盖(即隐藏)其他元素。