CODEWITHSUNDEEP
javascripteventsenyo
Angelo.Hannes
Angelo.Hannes

Reputation: 1729

relative position of touchevent in mobile browser

I have problems with getting the relative position of a touch event to the html element on which it occurred. I know, this was probably asked a million times. But I am struggling with this one for days, and looked at many solutions.

Strange thing, on all desktop browser I tested, it worked, but on none mobile browser.

I tested on Desktop

and on Mobile

Here is a jsfiddle with my code.

It seems as the problem is, that if my canvas which captures the events is inside a scrolling area, the scrollTop property of a offsetParent element is set to 0 on the mobile browser, where it has the appropriate value on the desktop browsers.

So is this a known bug? Or did I oversee something here? And more important, is there a workaround, or another method to achieve my goal?

Here is some code of mine, how I calculate the relative position:

getRelativePosition: function (element, event ) {
var position = { x : event.pageX, y : event.pageY };

do {

  this.log(element.offsetTop);
  this.log(element.offsetHeight);


  position.x -= element.offsetLeft;
  position.y -= element.offsetTop;

  position.x += element.scrollLeft;
  position.y += element.scrollTop;

} while(element = element.offsetParent);

return position;
}

Upvotes: 2

Views: 477

Answers (1)

Pre101
Pre101

Reputation: 2370

The problem is possibly caused because Enyo uses CSS 3D transforms for improved scrolling on some platforms. There was a new utility function called getAbsoluteBounds put into the core to calculate relative positions.

You might check to see if it handles your situation. Taking a brief look at it, I'm not certain that it is much different from yours. If not, you might want to file a Jira on it.

Upvotes: 1

Related Questions