Question

在桌面onmouseover上，它将颜色更改为绿色，然后我将click更改为红色，但在移动设备中，这两个事件同时发生。是否可以点击更改为绿色，然后在第二次点击它变为红色？

<?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元素处结束触摸。

svg悬停并点击手机

1 个答案: