Question

在将我的应用程序从鼠标移到触摸事件时，我注意到一些奇怪的行为。基本上，touchmove在DOM更改后会停止工作。在相同情况下，鼠标事件可以正常工作。我使用chrome开发人员工具和firefox对其进行了测试。他们似乎同意结果。是错误还是我错过了什么？

我创建了一个非常简单的代码示例，以演示该问题未与我使用的任何框架或库有关。我还发现seemingly related question不幸地没有解决方案。

触摸演示：

window.addEventListener("touchmove", onTouchMove, {passive: false})

document.addEventListener('DOMContentLoaded', function(){ 
  var elem = document.getElementById("nice");
  console.log(elem)
  elem.addEventListener("touchstart", onTouchStart)
})

function onTouchMove(event) {
  console.log("touch move")
}

function onTouchStart(event) {
  console.log("touch start")
  var elem = document.getElementById("nice")
  elem.remove()
}

<!DOCTYPE html>
<html>
<body style="width: 100%; height: 100%; background-color: yellow">
  <div style="position: absolute; width: 100px; height: 100px; background-color: red; left: 100px; top: 100px" id="nice"></div>
</body>
</html>

鼠标演示：

window.addEventListener("mousemove", onMouseMove, {passive: false})

document.addEventListener('DOMContentLoaded', function(){ 
  var elem = document.getElementById("nice");
  console.log(elem)
  elem.addEventListener("mousedown", onMouseDown)
})

function onMouseMove(event) {
  console.log("mouse move")
}

function onMouseDown(event) {
  console.log("mouse start")
  var elem = document.getElementById("nice")
  elem.remove()
}

<!DOCTYPE html>
<html>
<body style="width: 100%; height: 100%; background-color: yellow">
  <div style="position: absolute; width: 100px; height: 100px; background-color: red; left: 100px; top: 100px" id="nice"></div>
</body>
</html>

从红色方块开始的一个连续拖动手势应导致1）日志中的“开始”消息，2）消失该正方形，在这种情况下为DOM变化3）日志中的“移动”消息序列。在鼠标演示中就是这样，但是在触摸演示中，正方形消失后就没有“移动”事件。

Answer 1

如果您的元素被删除，这是预期的行为。

根据docs，如果删除元素，则事件仍将以该元素为目标，因此不必再冒泡到窗口或文档中。

因此，如果要删除元素，有两种解决方案。您可以修改“删除”方法，使其仅隐藏元素直到触摸过程结束，或者可以将事件附加到目标本身。

这里是一个示例，您可以看到窗口touchmove事件没有出现，而元素touchmove事件甚至在元素移除后仍然出现。

window.addEventListener("touchmove", onTouchMoveWindow, {passive: false})

document.addEventListener('DOMContentLoaded', function(){ 
  var elem = document.getElementById("nice");
  console.log(elem)
  elem.addEventListener("touchstart", onTouchStart)
  elem.addEventListener("touchmove", onTouchMoveElement)
})

function onTouchMoveWindow(event) {
  console.log("touch move window")
}

function onTouchMoveElement(event) {
  console.log("touch move element")
}

function onTouchStart(event) {
  console.log("touch start")
  var elem = document.getElementById("nice")
  elem.remove()
}

<!DOCTYPE html>
<html>
<body style="width: 100%; height: 100%; background-color: yellow">
  <div style="position: absolute; width: 100px; height: 100px; background-color: red; left: 100px; top: 100px" id="nice"></div>
</body>
</html>

为什么在DOM更改后未触发touchmove事件？

1 个答案: