2012-03-15 9 views
1

私はタッチベースのHTMLアプリケーションを試していて、iPad 2でテストしていましたが、HTMLのカスタム属性に問題があるようです。私は自分のPC上のクロム/ Safariでそれを実行したときに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はエラーとして返されます。

はTypeError:式「e.target.getAttribute」の結果は[未定義]誰かがこれをしてください説明し、また、利用可能な回避策で私を啓発することができます機能

ではありません。

答えて

2

タッチデバイスではmouseupイベントの代わりにtouchendを使用する必要があります。

タッチベースのデバイスは、多くのマウスイベントなどmouseupmousedownmousemovemouseovermouseoutをサポートしていますがclickイベントをサポートしていませんでした。 clickイベントでコードを試すこともできます。

更新

あなたはdocumentあなたが例えばelementFromPoint機能

を使用して、次のスニペットを使用することができますにイベントを添付する必要がある場合:

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

関連する問題