Javascript touch events in an android webview

Question

I have this javascript code working correctly. All it does is save a mousedown's coordinates, and modify the schematic on mouseup, depending on mousedown and mouseup coordinates.

Rather than reinvent the wheel, I am trying to use it in an android app, by loading it inside a webview.

The relevant changes are to change the mousedown and up listeners for :

            canvas.addEventListener("touchstart", saveDownCoords, false);
            canvas.addEventListener("touchend", modifySchematic, false);

and the function calculating the coordinates has been changed so :

function mouseCoords(e) {
  var cellSize = e.target.getAttribute("data-lib-shelves-cell-size");
  var cellRect = e.target.getBoundingClientRect();
  return {
      //x : Math.floor((e.clientX - cellRect.left) / cellSize),
      //y : Math.floor((e.clientY - cellRect.top) / cellSize)
      x : Math.floor((e.touches[0].clientX - cellRect.left) / cellSize),
      y : Math.floor((e.touches[0].clientY - cellRect.top) / cellSize)
  };
}

Nothing works at all unless I touch several fingers. Then it does what the program did with the mouse, sometimes using the down from the first finger, and the up of the second finger; sometimes the down and up of the first finger, but only if a second finger was used, never when only one finger is.

I have not written a touch handler for the webview, nor for the activity inside which it resides.

Did anyone ever encounter such a behaviour?

Answer 1

My problem resided in the javascript logic. One can't get a touchend's coordinates, but only the coordinates of the last touchmove before it.