Почему событие touchmove не запускается после изменений DOM? - PullRequest
Новая
       15

Почему событие touchmove не запускается после изменений DOM?

1 голос
/ 18 июня 2019

При перемещении приложения от мыши к событиям касания я заметил странное поведение. По сути, TouchMove перестает работать после изменения DOM. События мыши работают нормально в той же ситуации. Я протестировал его с помощью инструментов разработчика Chrome, а также Firefox. Кажется, они согласны с результатами. Это ошибка или я что-то упустил?

Я создал очень простой пример кода, чтобы продемонстрировать, что проблема не связана с какими-либо фреймворками или библиотеками, которые я использую. Я также нашел кажущийся связанным вопрос , который, к сожалению, не содержит решения.

Сенсорная демонстрация: 

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) сообщение «start» в журнале, 2) разочарование этого квадрата, которое в данном случае является изменением DOM 3) последовательность сообщений «move» в журнале. Это так в демонстрации мыши, но в демонстрации касания после исчезновения квадрата не происходит никаких событий перемещения.

1 Ответ

1 голос
/ 20 июня 2019

Это предполагаемое поведение, если ваш элемент удален.

Согласно документам , если вы удалите элемент, события все равно будут нацелены на него и, следовательно, больше не обязательно будут пузыриться в окне или документе.

Итак, есть два решения, если вы хотите удалить элемент. Вы можете изменить метод «remove» так, чтобы он скрывал элемент только до тех пор, пока не завершится сенсорный процесс, или вы можете прикрепить события к самой цели.

Вот пример, вы можете видеть, что события 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>

Похожие вопросы:

...