在 removeChild 后 Ontouchstart 事件不会触发答案

【问题标题】：Ontouchstart event does not fire after removeChild在 removeChild 后 Ontouchstart 事件不会触发
【发布时间】：2012-06-22 01:54:35
【问题描述】：

我在尝试为 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 上触摸红色方块，按钮旁边的文本中会添加一个“*”，以表明触发了 touchstart 事件。按下按钮会从其父容器中删除红色方块并再次添加它。在那之后，至少在我的 iPad 上，“*”字符不再被添加，所以 touchstart 似乎没有触发。

有人知道发生了什么吗？我承认我是 Javascript/HTML5 的新手，所以我可能会遗漏一些明显的东西，但是在带有鼠标的 PC 上的相同情况下，mousedown 事件在移除和重新插入对象后可以正常工作。

【问题讨论】：

标签： javascript ipad html

【解决方案1】：

移除 dom 元素的父元素也会移除附加的事件，所有。但我认为如果不是.removeChild，而是document.body.appendChild，它就不会发生。

【讨论】：

我现在对此进行了测试。如果我替换“cnt.removeChild(tdv);”用“document.body.appendChild(tdv);”它在 iPad 上仍然可以正常工作。