У TouchEvent's есть свойство touches, которое хранит список Touch'ей.
Каждый Touch хранит координаты и элемент, на котором произошло событие.
<div class="outside">
<div class="inside"></div>
</div>
<style>.inside {
max-width:30%;
min-height: 30vh;
margin: auto;
background-color: gray;
}</style>
<script>(() => {
const inside = document.querySelector('.inside');
const styles = getComputedStyle(inside, null);
const coordinates = {
x: [
inside.offsetLeft,
inside.offsetLeft + parseFloat(styles.width.replace('px', ''))
],
y: [
inside.offsetTop,
inside.offsetTop + parseFloat(styles.height.replace('px', ''))
]
};
document.addEventListener('touchmove', function (event) {
const hovered = [].some.call(event.touches, touch => {
const xInside = touch.clientX >= coordinates.x[0] && touch.clientX <= coordinates.x[1];
const yInside = touch.clientY >= coordinates.y[0] && touch.clientY <= coordinates.y[1];
return xInside && yInside;
});
inside.style.backgroundColor = hovered ? 'green' : 'red';
});
})()</script>