Определить положение касания на планшетах с помощью JavaScript

Question

У меня есть объект с названием «элемент». Если кто-то касается планшета, я хотел бы вернуть координаты x и y положения касания относительно объекта, т.е. е. верхний левый угол объекта имеет координаты x = 0 и y = 0.

Я знаю, как это реализовать на рабочих столах:

$(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"); 
}); 
}); 

Таким образом, слово «MouseDown» следует заменить на «touchstart», я думаю. Однако он все еще не работает.

Как изменить приведенный выше код таким образом, чтобы он работал на планшетах с «touchstart» вместо «mousedown»?

Answer 1

Вы должны явно вытащить объект touches из события, он не содержит координаты напрямую. Посмотрите на вторую строку кода ниже.

Вот код, который я всегда использую, чтобы получить контакт/указатель координаты:

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; 
    } 

Поместите это внутри обработчика событий, который прослушивает для любого или всех этих событий и добавить свой расчет смещения и это должно работать.

Answer 2

Обычно вы использовали бы, например, e.touches[0].clientX для обработки событий прикосновения

Беспоставочного решения JQuery, Если у вас есть следующий HTML

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

И сценарий

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); 
}); 

Примечания следующий скрипт обрабатывает только первый (из все возможные) сенсорный ввод

Answer 3

Попробуйте следующее:

$(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"); 
}); 

});