Событие Touch Move не срабатывает после удаления цели Touch Start
Я пытаюсь реализовать функциональность, похожую на перетаскивание, используя следующий шаблон:
Подписаться на маркер Pointer Down.Когда происходит событие «Вниз», подпишитесь на события «Перемещение указателя окна» и «Вверх» и удалите маркер.Выполните некоторые действия во время перемещения.При возникновении события Up отписаться от Move и Up.Это работает для событий мыши, но не работает для событий Touch. Они не срабатывают после удаления целевого элемента Touch Start. Я пытался использоватьУказатель событий Polyfill но это тоже не работает.
Я использую Chrome Dev Tools для эмуляции сенсорных событий. Смотрите образец:
initTestBlock('mouse', {
start: 'mousedown',
move: 'mousemove',
end: 'mouseup'
});
initTestBlock('touch', {
start: 'touchstart',
move: 'touchmove',
end: 'touchend'
});
initTestBlock('touch-no-remove', {
start: 'touchstart',
move: 'touchmove',
end: 'touchend'
}, true);
function initTestBlock(id, events, noRemove) {
var block = document.getElementById(id);
var parent = block.querySelector('.parent');
var target = block.querySelector('.target');
target.addEventListener(events.start, function(e) {
console.log(e.type);
if (!noRemove) {
setTimeout(function() {
// Remove target
target.parentElement.removeChild(target);
}, 1000);
}
function onMove(e) {
console.log(e.type);
var pt = getCoords(e);
parent.style.left = pt.x + 'px';
parent.style.top = pt.y + 'px';
}
function onEnd(e) {
console.log(e.type);
window.removeEventListener(events.move, onMove);
window.removeEventListener(events.end, onEnd);
}
window.addEventListener(events.move, onMove);
window.addEventListener(events.end, onEnd);
});
}
// Returns pointer coordinates
function getCoords(e) {
if (e instanceof TouchEvent) {
return {
x: e.touches[0].pageX,
y: e.touches[0].pageY
};
}
return {
x: e.pageX,
y: e.pageY
};
}
window.addEventListener('selectstart', function() {
return false;
}, true);
.parent {
background: darkred;
color: white;
width: 10em;
height: 10em;
position: absolute;
}
.target {
background: orange;
width: 4em;
height: 4em;
}
#mouse .parent {
left: 0em;
}
#touch .parent {
left: 11em;
}
#touch-no-remove .parent {
left: 22em;
}
<div id="mouse">
<div class="parent">Mouse events
<div class="target">Drag here</div>
</div>
</div>
<div id="touch">
<div class="parent">Touch events
<div class="target">Drag here</div>
</div>
</div>
<div id="touch-no-remove">
<div class="parent">Touch (no remove)
<div class="target">Drag here</div>
</div>
</div>