使用 JavaScript 确定平板电脑上的触摸位置
Determine touch position on tablets with JavaScript
我有一个名为 "element" 的对象。如果有人触摸平板电脑,我想 return 触摸位置相对于对象的 x 和 y 坐标,i。 e.对象的左上角的坐标为 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" 的平板电脑?
更新:见下方
您必须明确地从事件中拉出一个 touches
对象,它不直接包含坐标。查看下面代码的第二行。
这是我经常用来获取 touch/pointer 坐标的代码:
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;
}
把它放在一个监听任何或所有这些事件的事件监听器中,并添加你的偏移量计算,这应该可以工作。
通常你会使用例如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);
});
请注意以下脚本仅处理第一个(所有可能的)触摸输入
试试这个:
$(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");
});
});
几乎对我有用,但我不得不做一些调整,因为 originalEvent
属性 在 event
中测试时不属于 event
=31=] Chrome 版本 81.0.4044.138 和 Mozila Firefox 版本 76.0.1.
因为我发现一些直接使用 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 从 IE 11 开始支持鼠标和触摸。
例如,看Sortable.js.
Bind events#L423
el.addEventListener('pointerdown', handler);
Get coords#L574
let touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt);
let clientX = (touch || evt).clientX;
let clientY = (touch || evt).clientY;
我调整了 Domenico 解决方案,在没有 orbitcontrols 的情况下为 threeJS 在 pc 和移动设备上移动相机:
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)});
如果你有一些 built-in 滚动,你应该按如下方式进行:
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);
我有一个名为 "element" 的对象。如果有人触摸平板电脑,我想 return 触摸位置相对于对象的 x 和 y 坐标,i。 e.对象的左上角的坐标为 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" 的平板电脑?
更新:见下方
您必须明确地从事件中拉出一个 touches
对象,它不直接包含坐标。查看下面代码的第二行。
这是我经常用来获取 touch/pointer 坐标的代码:
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;
}
把它放在一个监听任何或所有这些事件的事件监听器中,并添加你的偏移量计算,这应该可以工作。
通常你会使用例如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);
});
请注意以下脚本仅处理第一个(所有可能的)触摸输入
试试这个:
$(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");
});
});
originalEvent
属性 在 event
中测试时不属于 event
=31=] Chrome 版本 81.0.4044.138 和 Mozila Firefox 版本 76.0.1.
因为我发现一些直接使用 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 从 IE 11 开始支持鼠标和触摸。
例如,看Sortable.js.
Bind events#L423
el.addEventListener('pointerdown', handler);
Get coords#L574
let touch = (evt.touches && evt.touches[0]) || (evt.pointerType && evt.pointerType === 'touch' && evt);
let clientX = (touch || evt).clientX;
let clientY = (touch || evt).clientY;
我调整了 Domenico 解决方案,在没有 orbitcontrols 的情况下为 threeJS 在 pc 和移动设备上移动相机:
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)});
如果你有一些 built-in 滚动,你应该按如下方式进行:
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);