javascript - touchmove 事件在替换 innerHTML 后停止

Question

我有一个跟踪 touchmove 事件的网页，允许用户在屏幕上拖动元素 - 工作正常。

我在用户移动元素时动态替换移动元素中的 html - 替换 html 效果很好。

问题是如果用户通过触摸内部 html(被替换)进行拖动，那么一旦内部 html 被替换(直到下一个 touchstart)，拖动(touchmove 事件)就会停止。

事件监听器在外部容器上，而不是被替换的 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) 进行了测试。

Answer 1

嗯..我想我应该阅读规范:

“此事件的目标必须与触摸点首次放置在表面上时开始的元素相同，即使触摸点此后已移出目标元素的交互区域。”

https://www.w3.org/TR/touch-events/#the-touchmove-event

此外，在输入所有内容后，我发现已经有人问过同样的问题并且有几个答案:Touch Move event don't fire after Touch Start target is removed