Determine touch position on tablets with JavaScript

问题

I have an object with the name "element". If somebody touches the tablet, I would like to return the x and y coordinates of the touch position relative to the object, i. e. the upper left corner of the object has the coordinates x=0 and y=0.

I know how to implement this on desktops:

$(function() {
$(document).mousedown(function(e) {
  var offset = $("#element").offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  alert(relativeX+':'+relativeY);
  $(".position").val("afaf");
});
});

So the word "mousedown" should be replaced by "touchstart", I guess. However, it still doesn't work.

How do I change the above code such that it works on tablets with "touchstart" instead of "mousedown"?

回答1:

You have to explicitly pull a touches object out of the event, it doesn't contain the coordinates directly. Look at line two of the code below.

Here is the code I always use to get touch/pointer coordinates:

    if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
        var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        x = touch.pageX;
        y = touch.pageY;
    } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
        x = e.clientX;
        y = e.clientY;
    }

Put this inside an event listener that listens for any or all of those events and add your offset calculation and this should work.

回答2:

Christopher Reid's answer almost worked for me, but I had to make a few ajustments because originalEvent property was not part of the event when I was testing in Google Chrome version 81.0.4044.138 and Mozila Firefox version 76.0.1.

Since I found some answers that use directly the event and other that uses event.originalEvent property, I added a check to use the first if the latter is undefined.

So instead of:

var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

I used:

var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
var touch = evt.touches[0] || evt.changedTouches[0];

So the full answer then becomes:

if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
    var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
    var touch = evt.touches[0] || evt.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
} else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
    x = e.clientX;
    y = e.clientY;
}

回答3:

Normally you would use e.g. e.touches[0].clientX to handle touch events

A non jquery solution, Assuming you have the following HTML

<div id="touchme" style="width: 200px; height: 200px; background: blue;">

And script

document.getElementById("touchme").addEventListener("touchstart",
function clicked(e) {
    var br = document.getElementById("touchme").getBoundingClientRect();
    // x & y are relative to the clicked element
    var x = e.touches[0].clientX - br.left;
    var y = e.touches[0].clientY - br.top;
    console.log("x: " + x + " y: " + y);
});

Note the following script handles only the first (of all the possible) touch input

回答4:

Try this:

$(function(){

$('body').on('touchstart', function(e) {
  var offset = $("#element").offset();
  var t = e.targetTouches.length > 0 ? e.targetTouches.item(0) : e.touches.item(0); 
  var relativeX = t.pageX - offset.left;
  var relativeY = t.pageY - offset.top;
  console.log(relativeX+':'+relativeY);
  $(".position").val("afaf");
});

});

来源：https://stackoverflow.com/questions/41993176/determine-touch-position-on-tablets-with-javascript