代码之家 › 专栏 › 技术社区 › devlop

touchmove事件在替换innerHTML后停止

touchmove touch events html javascript

devlop · 技术社区 · 8 年前

我有一个网页跟踪 触摸移动

我 -替换html很好。

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

此外,此问题不会发生在 移动鼠标 事件。

我已经做了一个jsfiddle演示。使用鼠标应该可以正常工作,不会出现任何问题(mousemove事件)。当您使用触摸设备(或使用Chrome的触摸模拟:更多工具>传感器>触摸>力启用)时,就会出现问题。

https://jsfiddle.net/dmdjvd7e/1/

相同,但使用jquery: https://jsfiddle.net/a2fwkr4e/6/

圆圈内的黄色方框每秒都会被替换。如果你触摸红色(而不是黄色),那么事情就会正常进行。如果您触摸黄色,则在更换黄色框(每秒钟)之前,一切都会正常工作,之后您将无法移动元素,直到再次触摸。

在仍然允许我替换html的情况下,有没有办法解决这个问题?

如果我不替换内部html,而只是修改它或简单地替换文本而不是html元素,那么就没有问题了。然而,我希望能够替换html(根据现有的应用程序要求)。

...

完整性代码(与JSFIDLE相同):

<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;
}

使用铬62和;Firefox 56(均在Windows 10上)&Chrome 60(安卓N)以及Safari/webkit 602.1(iPhone 6)。