Javascript 移除Child后不会触发Ontouchstart事件_Javascript_Ipad_Html

Javascript 移除Child后不会触发Ontouchstart事件

javascript ipad html

Javascript 移除Child后不会触发Ontouchstart事件,javascript,ipad,html,Javascript,Ipad,Html,我在为iPad编写JavaScript时发现了一个问题。我还没有在其他HTML5touch浏览器上测试过这一点，所以我不知道这是iPad/Mobile Safari漏洞还是更一般的问题问题是，如果一个对象附加了ontouchstart事件侦听器，它最初工作正常，但在我将其从其父容器中移除并再次添加后，它停止工作下面是一个简单的工作示例： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta c

我在为iPad编写JavaScript时发现了一个问题。我还没有在其他HTML5touch浏览器上测试过这一点，所以我不知道这是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>


测验
window.onload=函数（e）{
document.getElementById（“btn”）.onclick=clickBtn；
document.getElementById（“touch”）.ontouchstart=touchDiv；
}
功能点击按钮（e）{
var cnt=document.getElementById（“容器”）；
var tdv=document.getElementById（“touch”）；
去核细胞（tdv）；
儿童营养素（tdv）；
}
函数touchDiv（e）{
var sp=document.getElementById（“sp”）；
sp.innerHTML+=“*”；
}
碰这个
测验

（为了方便起见，我也把它放在这里：）如果你触摸iPad上的红色方块，按钮旁边的文本中会添加一个“*”来显示触发了touchstart事件。按下按钮将从其父容器中删除红方块并再次添加。之后，至少在我的iPad上，“*”字符不再添加，所以touchstart似乎不会启动

有人知道发生了什么事吗？我承认我不熟悉Javascript/HTML5，所以我可能遗漏了一些明显的东西，但在使用鼠标的PC上，mousedown事件在删除和重新插入对象后可以正常工作。

删除dom元素的父元素也会删除附加的事件，所有这些事件都会被删除。但是我想如果你不是

.removeChild

，而是

document.body.appendChild

，这就不会发生了。

我现在测试了这个。如果我将“cnt.removeChild（tdv）；”替换为“document.body.appendChild（tdv）；”，它在iPad上仍然可以工作。