javascript - svg 悬停并点击手机

Question

在桌面上，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>

fiddel

谢谢!

Answer 1

在触摸设备的可用性方面，正确的行为是在触摸开始时将 rect 着色为绿色，如果用户将手指从 rect 上拖开，那么它将回到蓝色。如果用户在同一个目标处释放，它会将颜色更改为红色。可以使用 CSS 复制此行为(删除您的 onmouseout 和 onmouseover 处理程序):

rect {
  fill: blue;
}

rect:active {
  fill: green
}

现在，如果您真的希望它按照您描述的方式运行(第一次点击是绿色，第二次点击是红色)，那么您必须将状态保持在某个地方(在 DOM 中？)这会使事情变得复杂，从我最想尝试的是...

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

问题在于您可以在不同的点开始触摸并在 rect 元素处结束触摸。