Touchmove event stops triggering after any element is removed from dom

Question

On touch devices such as iPad (or mobile emulaton mode in chrome). When tracking touchmove event on body and removing an element (on which touchstart started) from dom touchmove events from body stops triggering.

I made an example : http://jsbin.com/yinodosuxo/1/edit?js,console,output

Is there any way for the touchmove continue working even after the child element is removed?

Answer 1

I fixed this issue by caching the element until touchend event is emitted. The pseudo code for the view that triggered the touchstart event would look something like this:

view.remove = function () {
  if (didViewStartTouchEvents) {
    var _this = this;
    this.hideElement(); // display: none, opacity: 0, etc
    elementCache.appendChild(this); //append this element to some other place like body. Not needed but might be handy depending on situation
    document.body.addEventListener('touchend', function () {
      _this.didViewStartTouchEvents = false;
      _this.remove();
    });
  } else {
    // regular remove & cleanup
  }
}