Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (1)

Лучшие ответы пользователя

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

    @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() используется для обхода этой проблемы.
    Ответ написан
    2 комментария