Why touchmove event is not fired after DOM changes?
Question
While moving my application from mouse to touch events I noticed some strange behaviour. Basically, touchmove stops working after DOM changes. Mouse events work fine in the same situation. I tested it with chrome developer tools as well as firefox's. They seem to agree on results. Is it a bug or am I missing something?
I created very simple code example to demonstrate that the problem is not connected to any frameworks or libs I use. I also found seemingly related question which unfortunately contains no solution.
Touch demo:
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>
Mouse demo:
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>
One continuous drag gesture starting from red square should cause 1) 'start' message in the log, 2) disappiaring of that square, which is the DOM change in this case 3) sequence of 'move' messages in the log. It is so in mouse demo, but in touch demo there are no 'move' events after square disappears.
1 answers
solution1
1 ACCPTED 2019-06-19 23:51:07
This is an intended behaviour if your element is deleted.
According to the docs , if you delete an element, the events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore.
So there are two solutions if you want to delete the element. You can modify the "remove" method so that it would only hide the element until the touch process ends, or you can attach events to the target itself.
Here is an example, you can see the window touchmove events do not appear, while the element touchmove events appear even after the element's removal.
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>
Related questions:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.