Nexus,
что-то у меня координаты не совпадают.
предложу такой вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
<style>
html{
height: 1800px;
width: 1800px;
}
.outside {
padding: 8px;
background-color: #FFD700;
}
.inside {
max-width:30%;
min-height: 30vh;
margin: auto;
background-color: gray;
}</style>
<script>
(() => {
const inside = document.querySelector('.inside');
document.addEventListener('touchmove', function (event) {
const box = inside.getBoundingClientRect();
const coordinates = {
x: [
box.left,
box.left + box.width
],
y: [
box.top,
box.top + box.height
]
};
const hovered = [...event.touches].some(touch => { console.log(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>
</body>
</html>