Tap me – Ich sag dir wo

Man kann ja sagen was man will – wir leben mittlerweile in einer doch recht heilen Browserwelt. Standards werden nun sogar von Microsoft mehr oder weniger umgesetzt und man muss sich viel weniger Gedanken um die Cross-Browser-Kompatibilität machen. Aber manchmal gibt es doch noch Probleme. Wie im letzten Eintrag angesprochen, kann es schon mal vorkommen, dass gewisse Funktionen im Browser einfach nicht implementiert sind. Es ist aber auch möglich, dass das ein oder andere auch einfach nicht richtig funktioniert. Dazu zähle ich beim Android-Browser nun auch die Möglichkeit die zum Target relative Postion eines Touch-Events zu ermitteln.

Eigentlich sollte man diese Koordinaten über Properties offsetX und offsetY des Events bekommen. Das hat zunächst beim Entwickeln in Google Chrome auch wunderbar funktioniert. Die Enttäuschung folgte aber, als ich die App auf meine Acer Iconia ausgeführt habe. Es wurden mir immer sehr merkwürdige Werte geliefert. Neben offset* gibt es ja auch noch page*, layer* und einige andere Eigenschaften, die die Koordinaten des Events darstellen, eben nur mit unterschiedlichen Referenzpunkten. Damit kann man natürlich arbeiten 😉

Also habe ich schnell eine kleine Funktion geschrieben, die zu einem Event und einem HTML-Objekt (das Target des Events) die Koordinaten innerhalb des Targets liefert. Sie iteriert einfach über alle Parents bis sie ganz oben beim HTML-Tag ankommt und summiert die Offsets zum linken bzw. zum oberen Rand. Die relativen Koordinaten ergeben sich letztlich aus den Koordinaten des Events auf dem Bildschirm und den aufsummierten Offsets.

 

  1. Ext.ns('Ext.util');
  2. Ext.util.MouseUtil = {};
  3.  
  4. Ext.util.MouseUtil.getEventOffset = function(event, reference, offset) {
  5.   // keep in mind, that the reference has also offsets
  6.   if (!offset) offset = {x: reference.offsetLeft, y: reference.offsetTop};
  7.  
  8.   if (!(reference.parentElement instanceof HTMLHtmlElement)) {
  9.     offset.x += reference.parentElement.offsetLeft;
  10.     offset.y += reference.parentElement.offsetTop;
  11.     Ext.util.MouseUtil.getEventOffset(
  12.       event, reference.parentElement, offset
  13.     );
  14.   }
  15.  
  16.   return {
  17.     x: event.pageX - offset.x,
  18.     y: event.pageY - offset.y
  19.   };
  20. };

Ich habe die Funktion noch nicht auf verschiedenen Plattformen getestet, aber unter Android und auch in Google Chrome scheint sie zu funktionieren 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.