@TheCrossCarrier

Как корректно добиться эффекта pointer-events: none на сенсорном устройстве?

Использую pointer события для реализации drag'n'drop. При дропе элемента, событие должно проходить "сквозь" перетаскиваемый элемент, чтобы понять, был ли дроп на дропзону. При использовании мыши всё работает корректно, но при переключении на тач устройство, pointer-events: none не работает.

Я набросал демонстрационный пример, чтобы рассмотреть проблему было удобнее:
codepen.io
  • Вопрос задан
  • 380 просмотров
Решения вопроса 1
@TheCrossCarrier Автор вопроса
Достаточно в моём коде доставить строку
const eventTarget = document.elementFromPoint(event.clientX, event.clientY)
в событии pointerup чтобы получить элемент над которым отпустили драг.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Flyheck
В некоторых ситуациях свойство pointer-events: none может не работать на мобильных устройствах. Чтобы обойти это ограничение, вы можете использовать следующий подход:
Удалите свойство pointer-events: none из объекта draggedElementStyles.
Вместо этого добавьте следующую функцию, чтобы определить элемент, который находится под указателем:
function elementFromPointWithExclusion(x, y) {
  // Сначала скрываем draggedElement
  draggedElement.style.display = 'none';
  // Затем получаем элемент, который находится под указателем
  const element = document.elementFromPoint(x, y);
  // Возвращаем draggedElement обратно на место
  draggedElement.style.display = '';
  return element;
}

Замените строки console.log(event.target) и logEventTarget.innerText = event.target.outerHTML;
на следующий код:
const targetElement = elementFromPointWithExclusion(event.clientX, event.clientY);
console.log(targetElement);
logEventTarget.innerText = targetElement.outerHTML;

Теперь вместо использования event.target, вы будете использовать элемент, найденный с помощью функции elementFromPointWithExclusion. Это позволит вам определить элемент, который находится под перетаскиваемым элементом, даже на мобильных устройствах.

Хотя это и может показаться костылем, на самом деле это общепринятый подход для решения данной проблемы.
К сожалению, существует ограничение в поведении событий touch на мобильных устройствах, из-за которого они не пропускаются через элементы с pointer-events: none. Это означает, что нет прямого способа для получения элемента под перетаскиваемым объектом с использованием только touch событий. Вместо этого, document.elementFromPoint() используется для обхода этой проблемы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы