我有一个跟踪touchmove事件的网页，允许用户在屏幕上拖动元素 - 工作正常。
当用户移动它时，我在移动元素中动态替换 html - 替换 html 工作正常。
问题是，如果用户通过触摸内部 html（被替换）进行拖动，那么一旦内部 html 被替换（直到下一个 touchstart），拖动（触摸移动事件）就会停止。
事件侦听器位于外部容器上，而不是被替换的 html，所以我认为它应该继续捕获事件。
mousemove事件也不会发生此问题。
我做了一个 jsfiddle 演示。使用鼠标应该可以正常工作并且不会发生任何问题（mousemove 事件）。当您使用触摸设备（或使用 Chrome 的触摸模拟：更多工具 > 传感器 > 触摸 > 强制启用）时会出现此问题。
https://jsfiddle.net/dmdjvd7e/1/
相同但使用 jquery：https ://jsfiddle.net/a2fwkr4e/6/
在演示中，您可以拖动屏幕周围的红色圆圈。圆圈内的黄色框每秒更换一次。如果您触摸红色（不是黄色），那么一切都会正常工作。如果您触摸黄色，那么一切都会正常工作，直到黄色框被替换（每秒），之后您将不会移动元素，直到您再次触摸开始。
这是预期的浏览器行为吗？为什么mousemove不同？有没有办法解决这个问题，同时仍然允许我替换 html？
如果我不替换内部 html，而只是修改它或只是替换文本而不是 html 元素，那么就没有问题。但是，我希望能够替换 html（根据现有的应用程序要求）。
...
包含完整性的代码（与 jsfiddle 相同）：
css/html:
<style>
.container {
user-select: none;
background-color: gray;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.dot {
border-radius: 100%;
background-color: red;
padding: 2em;
margin: -4em 0 0 -4em;
position: absolute;
top: 3em;
left: 3em;
color: blue;
}
.dot div {
font-weight: bold;
color: black;
background-color: yellow;
padding: 2em;
}
</style>
<div class='container'>
<div class='dot'><div class='num'>0</div></div>
</div>
js：
var eContainer = document.querySelector('.container'),
eDot = document.querySelector('.dot'),
dragActive = false,
val = 0;
var hInterval = setInterval(function() {
++val;
eDot.innerHTML = '<div class="num">' + val + '</div>';
}, 1000);
eContainer.addEventListener('touchstart', dragStart);
eContainer.addEventListener('touchend', dragEnd);
eContainer.addEventListener('touchmove', dragMove);
eContainer.addEventListener('mousedown', dragStart);
eContainer.addEventListener('click', dragEnd);
eContainer.addEventListener('mousemove', dragMove);
function dragStart(e) {
dragActive = true;
}
function dragMove(e) {
if (!dragActive) return;
var posX = e.clientX || (e.touches && e.touches.length ? e.touches[0].pageX : 0),
posY = e.clientY || (e.touches && e.touches.length ? e.touches[0].pageY : 0);
eDot.style.left = posX + 'px';
eDot.style.top = posY + 'px';
}
function dragEnd(e) {
dragActive = false;
}
使用 Chrome 62 和 Firefox 56（均在 Windows 10 上）和 Chrome 60 (Android N) 以及 Safari/webkit 602.1 (iPhone 6) 进行了测试。