Javascript svg悬停并单击mobile

在桌面

onmouseover

上，它将颜色更改为绿色，然后单击

它将更改为红色，但在移动设备上，这两个事件同时发生。是否有可能在第二次轻触时变为绿色，然后变为红色

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600" version="1.1" style="display:inline">
  <g>
<rect id="rect1" x="160" y="10"
width="60" height="60"  fill="blue"
onmouseout="evt.target.setAttribute('fill','blue');"
onclick="evt.target.setAttribute('fill','red');"
onmouseover="evt.target.setAttribute('fill','green');"/>
  </g>
</svg>




谢谢
 触摸设备可用性方面的正确行为是在触摸开始时将
rect
涂成绿色，如果用户将手指从
rect
上拖下来，则它将变回蓝色。如果用户在同一目标上释放，则会将颜色更改为红色。此行为可以通过CSS复制（删除
onmouseout
和
onmouseover
处理程序）：

现在，如果你真的想让它按照你描述的方式运行（第一个点击是绿色的，第二个点击是红色的），那么你必须将状态保留在某个地方（在DOM中？），这会使事情变得复杂，从我的想法来看，我会尝试

ontouchend="evt.target.getAttribute('data-clicked') === "true" ? evt.target.setAttributed('fill', 'red') : evt.target.setAttribute('data-clicked', 'true')";

问题在于，您可以在不同的点开始触摸，然后在
rect
元素结束触摸

ontouchend="evt.target.getAttribute('data-clicked') === "true" ? evt.target.setAttributed('fill', 'red') : evt.target.setAttribute('data-clicked', 'true')";