1

touchBased HTML アプリケーションを作成しようとしていて、iPad 2 でテストしていました。ただし、HTML のカスタム属性に問題があるようです。

ここに私のコードがあります

<!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>

PC の Chrome/Safari で実行するとitemindex、アイテムをクリックするとコンソールに正しいものが表示されます。

ただし、iPad2 ではitemindexof<img>を取得し0ます。これは正しいのですが、場合divによってpは itemIndex がエラーとして返されます。

TypeError: 式 'e.target.getAttribute' [undefined] の結果は関数ではありません

誰かがこれを説明してください。また、利用可能な回避策について教えてください。

4

1 に答える 1

2

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

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"));
}
于 2012-03-15T11:40:43.120 に答える