2013-07-30 13 views
5

Ho sviluppato un'applicazione HTML5 e ora sto affrontando un problema piuttosto difficile ottenere una corretta posizione di tocco/mouse locale all'interno di un div di destinazione in un sistema di coordinate appropriato.TouchEvent/MouseEvent posizione locale all'interno di div

Esistono molte soluzioni su StackOverflow ma la cosa non è così semplice.

La soluzione "classica" consiste nel calcolare un offset target e sottrarlo dalla posizione pageX e pageY. Molte persone usano la funzione JQuery offset ma in alcune situazioni l'abbiamo trovata buggy (1.8.3) su iOS quando la pagina scorre e contiene i div zoom nidificati.

La situazione è più complicata perché non ci sono solo div di zoom annidati (proprietà CSS zoom) ma anche livelli con diverse trasformazioni CSS (traduzioni x e y).

Infine abbiamo scritto la nostra funzione per calcolare la posizione del mouse/tocco locale in un div target (usando WebKitCSSMatrix, MSCSSMatrix e altri ...). Funziona 'quasi' bene, ma non è ancora perfetto sono alcune situazioni - specialmente quando ci sono div catapizzati.

Quindi la mia domanda è se c'è qualche soluzione generale/libreria per calcolare una posizione touch/mouse locale all'interno di un target div considerando i requisiti sopra descritti ??

Grazie.

Bella giornata a tutti ...

+0

C'è un particolare evento mouse/touch a cui sei interessato? pageX e pageY sono misurati in pixel CSS, quindi non dovrebbero essere influenzati dallo zoom, i pixel CSS sono costanti attraverso lo zoom, se le cose funzionano correttamente. –

risposta

0

Su un evento del mouse si avrà 5 coppie di proprietà tra cui scegliere.

Ecco una eccellente browser quirks reference che spiega la differenza:

Ecco i 3 coprono in dettaglio

  • pageX/Y dà le coordinate relative all'elemento in pixel CSS.
  • clientX/Y fornisce le coordinate relative al viewport in pixel CSS.
  • screenX/Y fornisce le coordinate relative allo schermo in pixel del dispositivo.
+0

Grazie mille. È un ottimo articolo Sfortunatamente non è una risposta alla mia domanda iniziale. – MalcomCZ

-1

Se si utilizza event.offsetX e event.offsetY, è necessario farlo. (scusate, so che è vecchio)

+0

Non c'è offsetX o offsetY in un evento touch. – Timmmm

+0

sì hai ragione ... non so cosa stavo pensando ... lol – carinlynchin

Problemi correlati