svg에서 마우스를 가져 가서 모바일을 클릭하십시오.

Question

바탕 화면에서 onmouseover은 녹색으로 바뀌고 그 다음 I 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 
} 

이제, 당신이 정말로 당신이 설명하는 방식으로 행동하려는 경우는 (첫 번째 탭은 녹색이고, 두 번째 탭은 빨간색입니다) '어딘가에 상태를 유지해야 D (DOM을에?) 내가 시도 할 것입니다 내 마음의 상단에서, 일을 복잡하게 ...

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

이의 문제는 당신이에 터치를 시작할 수 있다는 것입니다 다른 점을 터치하고 rect 요소에서 터치를 끝내십시오.