Question

我有一个简单的* .svg文件，里面有一些javascript代码。共有6个圆圈，它们彼此部分叠加。当其中一个圆圈发生mousover事件时，此圆圈应显示在顶部。这很好用。这是我的代码：

 <svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="400" height="300">

    <script>
            function mouseOver(evt) {
                var parent = evt.target.parentNode;
                parent.removeChild(evt.target);
                parent.appendChild(evt.target);
            }

            function click(evt) {
                alert("CLICKED");
            }
    </script>

<g id="myCircles" stroke="none" onclick="click(evt)" onmouseover="mouseOver(evt)">
    <circle id="circ1" cx="150" cy="100" r="50" fill="red"/>
    <circle id="circ2" cx="100" cy="60" r="30" fill="yellow"/>
    <circle id="circ3" cx="200" cy="150" r="80" fill="blue"/>
    <circle id="circ4" cx="160" cy="190" r="70" fill="green"/>
    <circle id="circ5" cx="100" cy="220" r="10" fill="gray"/>
    <circle id="circ6" cx="80" cy="90" r="20" fill="black"/>
</g>
</svg>

但是，如果我使用此mouseOver功能，则onclick事件将不再起作用。我想这与在DOM结构中删除和修改Element有关。如果我取消注释mouseOver(evt)中的代码，则会触发onclick事件。谁知道如何解决这个问题？

编辑：有趣的是，当我使用onmousedown代替onclick事件时，一切正常！谁能解释为什么？

Answer 1

您可以使用z-index属性将选定的圆圈置于顶部。如果使用.css文件，请添加z-index并将初始值设置为相同的值（例如，“1”）

 z-index:1;

在鼠标悬停事件中，将z-index更改为更高的值（例如，“5”）以将其弹出到圆形堆栈的顶部。在mouseout事件中，将z-index重置为1，最后使用mousedown事件生成警报“Clicked”。

删除/追加子元素时onclick不起作用

1 个答案: