0

iPad用のJavaScriptをコーディングしようとすると問題が発生しました。私はこれを他のHTML5タッチブラウザでテストしていないので、これがiPad / Mobile Safariのバグなのか、それとももっと一般的なものなのかわかりません。

問題は、オブジェクトにontouchstartイベントリスナーがアタッチされている場合、最初は正常に機能しますが、親コンテナーからオブジェクトを削除して再度追加すると、機能しなくなることです。

最小限の作業例を次に示します。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript">
    window.onload = function(e) {
        document.getElementById("btn").onclick = clickBtn;
        document.getElementById("touch").ontouchstart = touchDiv;
    }

    function clickBtn(e) {
        var cnt = document.getElementById("container");
        var tdv = document.getElementById("touch");
        cnt.removeChild(tdv);
        cnt.appendChild(tdv);
    }

    function touchDiv(e) {
        var sp = document.getElementById("sp");         
        sp.innerHTML += "*";
    }
</script>
</head>
<body>
<div id=container>
<div style="width: 200px; height: 200px; background-color: red;" id="touch">Touch this</div>
</div>
<button id="btn">Test</button>
<span id=sp></span>
</body>
</html>

（便宜上、ここにも配置します：http: //dl.dropbox.com/u/8100013/test.html。）iPadの赤い四角をタッチすると、横のテキストに「*」が追加されます。タッチスタートイベントが発生したことを示すボタン。ボタンを押すと、親コンテナから赤い四角が削除され、再度追加されます。その後、少なくとも私のiPadでは、「*」文字が追加されなくなったため、タッチスタートが起動しないようです。

誰かが何が起こっているのか知っていますか？私はJavascript/HTML5を初めて使用するので、明らかな何かが欠けている可能性があることを認めますが、マウスを搭載したPCの同じ状況では、オブジェクトを削除して再挿入した後、mousedownイベントは正常に機能します。

4

1 に答える 1

0

dom 要素の親を削除すると、関連付けられているイベントもすべて削除されます。.removeChildしかし、あなたの代わりにdocument.body.appendChild、それは起こらないと思います。

于 2012-06-03T21:24:06.230 に答える