Client X/Y on Chrome (Android)

Question

I wish to retrieve the exact X/Y coordinates where the user has pressed on the screen. The coordinates must be the same no matter what level of zoom or scroll is applied. I am using event.clientX and event.clientY to retrieve these coordinates and this behaves as expected. The code is basically as follows:

        $("#canvas").touchstart(function(e){
            e.preventDefault();
            var Y_LIMIT = 100
            if(e.clientY <= Y_LIMIT){
                   ... do stuff
            }
         });

A textarea is present on the screen with a submit button to allow the user to enter text. The issue is after the tablet focuses in on the textarea and the user enters text the clientX and clientY coordinates permanently change. I wish for the values to stay the same regardless of this operation.

Is there any way to keep clientX and clientY consistent even after entering text into a textarea or input box ?

score 0 · Answer 1 · edited May 23 '17 at 12:29

Despite the fact that there is still a question left about how clientX & clientY have changed(did they descrease or increase their values?)

If they descreased their values you could give this a try to take the absolute position of a parent HTML element(DIV?) in which your textarea is located into consideration:

Check out this answer that answers about how to get absolute position of a HTML element:

// get absolut position of an HTML element
function cumulativeOffset (element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

// event handler callback function to retrieve client position
function funcToGetClientCoords(evt){
  var area = document.getElementById("parentDIVId");
  var absoluteViewportPos = cumulativeOffset(area);
  return {
    x: evt.clientX + absoluteViewportPos.left,
    y: evt.clientY + absoluteViewportPos.top
  };
}

I did not prove this but it sounds to me as if clientX & clientY coords changed according to your relative screenview position and when you click onto a textarea you automatically zoom into this textarea and so clientX and clientY coords might be descreased.

Another try could be to remember the absolute position of your parent DIV at the beginning and when interacting with your textarea add this position to clientX/clientY positions.

Hope this helps.

Client X/Y on Chrome (Android)

1 Answers1