我有一个名为“element”的对象。如果有人触摸了平板电脑，我想返回相对于对象的触摸位置的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”？
更新：请参考下面Daniel Lavedonio de Lima的回答
你必须明确地从事件中提取出一个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;
}
把这段代码放在一个监听器里，监听任意或所有这些事件，并加入你的偏移计算，就可以使其正常工作。
Christopher Reid's answer对我来说几乎有效，但是由于当我在Google Chrome版本81.0.4044.138和Mozilla Firefox版本76.0.1中进行测试时，originalEvent属性不是event的一部分，所以我必须进行一些调整。
由于我发现有些答案直接使用event，而另一些答案使用event.originalEvent属性，因此我添加了一个检查，如果后者未定义，则使用前者。
因此，替代原来的代码：
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
我使用了：
var evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
var touch = evt.touches[0] || evt.changedTouches[0];
那么完整的答案就是：
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;
}
PointerEvent 支持鼠标和触摸屏。
例如，让我们看看 Sortable.js。
绑定事件 #L423
el.addEventListener('pointerdown', handler);
获取坐标 #L574
let touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt);
let clientX = (touch || evt).clientX;
let clientY = (touch || evt).clientY;
通常，您可以使用例如e.touches [0] .clientX 来处理触摸事件。
非 jquery 解决方案，假设您具有以下 HTML
<code><div id="touchme" style="width: 200px; height: 200px; background: blue;">
</code>
脚本
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);
});
请注意，以下脚本仅处理第一个（所有可能的）触摸输入。试试这个：
$(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");
});
});
const rect = event.target.getBoundingClientRect();
x = event.targetTouches[0].pageX - (rect.left + document.documentElement.scrollLeft);
y = event.targetTouches[0].pageY - (rect.top + document.documentElement.scrollTop);
我将Domenico的解决方案改编为适用于threeJS在PC和移动设备上移动相机而不使用orbitcontrols：
window.addEventListener("touchmove", function clicked(e) {
cursor.x = e.touches[0].clientX / sizes.width - 0.5
cursor.y = -(e.touches[0].clientY / sizes.height - 0.5)});