TouchEvent/MouseEvent локальная позиция внутри div

Question

Я разрабатываю приложение HTML5, и теперь у меня возникла довольно сложная проблема с получением правильной локальной позиции касания/мыши внутри целевого div в правильной системе координат.

Существует много решений на StackOverflow, но дело не так просто.

«Классическим» решением является вычисление смещения цели и вычитание его из позиции pageX и pageY. Многие используют функцию JQuery offset, но мы обнаружили, что это ошибка (1.8.3) на iOS в некоторых ситуациях, когда страница прокручивается и содержит вложенные расширенные div.

Ситуация осложняется тем, что есть не только вложенные расширенные div (свойство CSS zoom), но также слои с различными преобразованиями CSS (переводы x и y).

Наконец, мы создали собственную функцию для вычисления локального положения мыши/касания в целевом div (используя WebKitCSSMatrix, MSCSSMatrix и другие ...). Он работает почти «хорошо», но все еще не идеально подходит для некоторых ситуаций, особенно когда есть вложенные расширенные div.

Итак, мой вопрос заключается в том, есть ли какое-то общее решение/библиотека для вычисления локальной позиции касания/мыши внутри целевого div с учетом вышеописанных требований?

Спасибо.

Хороший день, чтобы все ...

Answer 1

На событие мыши вы будете иметь 5 пар свойств, чтобы выбрать из.

Вот отличный browser quirks reference, что объясняет разницу:

Вот 3 они покрывают подробно

• pageX/Y дает координаты относительно элемента в CSS пикселей.
• clientX/Y дает координаты относительно области просмотра в пикселях CSS.
• screenX/Y дает координаты относительно экрана в пикселях устройства.

Answer 2

Если вы используете event.offsetX и event.offsetY, это должно сделать это. (извините, что я знаю его старый)