2012-03-15 5 views
1

터치 기반 HTML 애플리케이션을 테스트하고 iPad 2에서 테스트했습니다. 그러나 HTML의 사용자 정의 속성에 문제가있는 것으로 보입니다. 난 내 PC에 크롬/사파리에서 실행하면javascript getAttribute()가 iPad2 Safari에서 작동하지 않습니다.

여기에 내가 항목을 클릭 할 때 콘솔에 정확한 itemindex을 볼 수있어, 내 코드

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
<script type="text/javascript"> 

document.addEventListener('mouseup',onTouchReleased, true); 
document.addEventListener('touchend',onTouchReleased, true); 

function onTouchReleased(e) { 
// Capture the event 
if(e.preventDefault) 
    e.preventDefault(); 
if(e.stopPropagation) 
    e.stopPropagation(); 
console.log(e.target); 
console.log(e.target.getAttribute("itemindex")); 
} 
</script> 
</head> 
<body> 
<img itemindex="0" src="video.jpg"/> 
<div itemindex="1">HELLO1</div> 
<p itemindex="2">HELLO2</p> 

</body> 
</html> 

입니다.

그러나, ipad2에, 내가 올바른 0<img>itemindex를 얻을 수 있지만, 경우 div 또는 p에 itemIndex라는 오류로 반환됩니다.

형식 오류 : 식 'e.target.getAttribute'의 결과는 [정의] 사람이 제발 설명하고, 또한 사용할 수있는 해결 방법을 가르치 려 수있는 기능

없습니다.

답변

2

터치 장치 용 mouseup 이벤트 대신 touchend을 사용해야합니다.

터치 기반의 디바이스는 많은 마우스 이벤트 등 mouseup, mousedown, mousemove, mouseover, mouseout을 지원하지만 click 이벤트를 지원하지 않았다. click 이벤트로 코드를 시도 할 수도 있습니다.

업데이트

당신은 예를 들어 elementFromPoint 기능

를 사용하여 document 당신이를 사용할 수 있습니다 조각에 이벤트를 첨부해야하는 경우 :

function onTouchReleased(e) { 
    // Capture the event 
    if(e.preventDefault) 
     e.preventDefault(); 
    if(e.stopPropagation) 
     e.stopPropagation(); 
    var touch = e.touches[0]; 
    var pointTarget = document.elementFromPoint(touch.pageX, touch.pageY); 
    console.log(pointTarget); 
    console.log(pointTarget.getAttribute("itemindex")); 
} 
+0

은 내가 잊었던 ;-) 미안했다 첫번째 편집에서 그것을 넣으려면, 이제 선을 추가했습니다. – Tirtha

+0

문서가 아닌 특정 요소에 이벤트를 첨부하려고 했습니까? – antyrat

+0

나는 지금했다 .'document.getElementById ("divElement"). addEventListener ('mouseup', onTouchReleased, true); document.getElementById ("divElement"). addEventListener ('touchend', onTouchReleased, true); '와'

HELLO1
'이긴하지만 여전히 동일합니다 – Tirtha

관련 문제