Question

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

我在用户移动时动态替换移动元素中的html - 替换html工作正常。

问题是如果用户通过触摸内部html（被替换）拖动，那么拖动（touchmove事件）会在内部html被替换后停止（直到下一个触摸开始）。

事件监听器位于外部容器上，而不是被替换的html，所以我认为它应该继续捕获事件。

mousemove 事件也不会发生此问题。

我做了一个jsfiddle演示。使用鼠标应该可以正常工作，不会出现任何问题（mousemove事件）。当您使用触摸设备（或使用Chrome的触摸模拟：更多工具＆gt;传感器＆gt;触摸＆gt;强制启用）时，会出现此问题。

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＆amp; C测试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

touchmove事件在替换innerHTML

1 个答案: