Остановить событие TOUCHMOVE, когда палец больше не находится на элементе (но все еще нажат)

Question

У меня есть div (#parent) с 4 дочерними элементами внутри. Идея состоит в том, что когда я касаюсь одного из элементов и перемещаю палец, я запускаю событие (touchmove), а когда я перемещаю палец за пределы текущего (все еще нажимая), событие должно прекратиться.

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

document.querySelector("#parent").addEventListener('touchmove', (e) => {
    console.log(`pressed ${e.target.getAttribute('data-dir')}`)
});

<div id="parent">
   <span data-dir="3">&uarr;</span>
   <span data-dir="0">&rarr;</span>
   <span data-dir="1">&darr;</span>
   <span data-dir="2">&larr;</span>
</div>