Показать сообщение отдельно
  #2 (permalink)  
Старый 05.10.2019, 13:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

У 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>
Ответить с цитированием