2013-07-30 18 views
5

Pracuję nad aplikacją HTML5, a teraz napotykam na dość trudny problem z uzyskaniem właściwej lokalnej pozycji dotyku/myszy wewnątrz elementu docelowego w odpowiednim układzie współrzędnych.Lokalna pozycja TouchEvent/MouseEvent wewnątrz div

Istnieje wiele rozwiązań w StackOverflow, ale nie jest to takie proste.

"Klasycznym" rozwiązaniem jest obliczenie przesunięcia celu i odjęcie go od pozycji pageX i pageY. Wiele osób korzysta z funkcji JQuery offset, ale stwierdziliśmy, że jest ona wadliwa (1.8.3) na iOS w niektórych sytuacjach, gdy strona jest przewijana i zawiera zagnieżdżone powiększone elementy div.

Sytuacja jest bardziej skomplikowana, ponieważ istnieją nie tylko zagnieżdżone powiększone elementy div (CSS zoom), ale także warstwy z różnymi przekształceniami CSS (tłumaczenia xi y).

W końcu napisaliśmy własną funkcję obliczania lokalnej pozycji myszy/dotyku w docelowym dziale div (przy użyciu WebKitCSSMatrix, MSCSSMatrix i innych ...). Działa "prawie" dobrze, ale wciąż nie jest doskonała, to niektóre sytuacje - szczególnie gdy są zagnieżdżone powiększone elementy div.

Moje pytanie brzmi, czy istnieje jakieś ogólne rozwiązanie/biblioteka do obliczenia lokalnej pozycji dotykowej/myszy wewnątrz elementu docelowego, biorąc pod uwagę wyżej opisane wymagania?

Dzięki.

Ładny dzień dla wszystkich ...

+0

Czy jest jakieś szczególne wydarzenie związane z myszką/dotykiem, które Cię interesuje? pageX i pageY są mierzone w pikselach CSS, więc nie powinny mieć na nie wpływu powiększanie, a piksele CSS są stałe na całym powiększeniu, jeśli wszystko działa poprawnie. –

Odpowiedz

0

Na razie myszy trzeba będzie 5 par własności do wyboru.

Oto doskonały browser quirks reference który wyjaśnia różnicę:

Oto 3 obejmują one szczegółowo

  • pageX/Y daje współrzędne względem elementu w css pikseli.
  • clientX/Y podaje współrzędne względem rzutni w pikselach CSS.
  • screenX/Y podaje współrzędne względem ekranu w pikselach urządzenia.
+0

Wielkie dzięki. To bardzo dobry artykuł. Niestety nie jest to odpowiedź na moje oryginalne pytanie. – MalcomCZ

-1

Jeśli używasz event.offsetX i event.offsetY, to powinno to zrobić. (przepraszam, wiem, że jest stary)

+0

Brak zdarzenia offsetX lub offsetY w zdarzeniu dotyku. – Timmmm

+0

tak masz rację ... nie wiem co myślałem ... lol – carinlynchin