我正在监听触摸事件，并且当我使用 layerX/layerY 调整 pageX/pageY 值时，该点在我的触摸(我的手指)处显示为圆圈的顶部，而不是中间。
//pageX = 310, layerX = -9. This is exactly in the middle of the touch circle horizontally
touchEvent.changedTouches[0].pageX + touchEvent.layerX
//pageY = 90, layerY = -34. This is exactly at the top of the touch circle!
touchEvent.changedTouches[0].pageX + touchEvent.layerX
当我检查触摸圆的半径时，我看到的只是半径 1:webkitRadiusX: 1、webkitRadiusY: 1(来自 console.dir(touchEvent);).
我有三个问题:
为什么触摸屏幕时半径“1”(Windows 8/Chrome)会显示一个半径很大的圆，而“x”位于圆的中间？
为什么我需要组合图层和页面坐标才能获得与单独在 mouseEVent 的图层坐标上获得的值相同的值？
在 touchEvent 和 mouseevent 上获取元素内的点的正确方法是什么？
代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Touch Test</title>
<script src="touch.js" type="text/javascript"></script>
</head>
<body>
<div id="touchBox" class="touchBox" style="position: relative; top: 19px; left: 0px; width: 638px; height: 142px; border: solid 1px #000000;"></div>
</body>
</html>
touch.js
window.Touch = {
init: function()
{
Touch.dom = document.getElementById( "touchBox" );
//Start listening
Touch.dom.addEventListener( "touchstart", Touch.mouseDown, false );
Touch.dom.addEventListener( "mousedown", Touch.mouseDown, false );
},
getPoint: function(touchEvent)
{
var x, y;
//Using touch events
if ( touchEvent.changedTouches && touchEvent.changedTouches[ 0 ] )
{
//Get the offset of the dom object
var offsety = Touch.dom.offsetTop || 0;
var offsetx = Touch.dom.offsetLeft || 0;
//The points within the dom object
x = touchEvent.changedTouches[0].pageX - offsetx + touchEvent.layerX;
y = touchEvent.changedTouches[0].pageY - offsety + touchEvent.layerY;
}
//Get points relative to the layer
else if ( touchEvent.layerX || 0 == touchEvent.layerX )
{
x = touchEvent.layerX;
y = touchEvent.layerY;
}
//Get the points relative to the dom object
else if ( touchEvent.offsetX || 0 == touchEvent.offsetX )
{
x = touchEvent.offsetX;
y = touchEvent.offsetY;
}
return { x: x, y: y };
},
mouseDown: function(mouseEvent)
{
//Make sure it doesn't move the page
mouseEvent.preventDefault();
mouseEvent.stopPropagation();
//Get the point
var point = Touch.getPoint( mouseEvent );
//Draw the point
var pointDiv = document.createElement( "div" );
pointDiv.style.width = "3px";
pointDiv.style.height = "3px";
pointDiv.style.backgroundColor = "#000000";
pointDiv.style.left = point.x + "px";
pointDiv.style.top = point.y + "px";
pointDiv.style.position = "absolute";
Touch.dom.appendChild( pointDiv );
//Print the point
console.dir( point );
}
};
window.addEventListener( "load", Touch.init );
最佳答案
问题是偏移量。不需要。偏移量似乎已合并到layerX/Y中。因此将触摸事件的代码更改为:
//Using touch events
if ( touchEvent.changedTouches && touchEvent.changedTouches[ 0 ] )
{
//The points within the dom object
x = touchEvent.changedTouches[0].pageX + touchEvent.layerX;
y = touchEvent.changedTouches[0].pageY + touchEvent.layerY;
}
关于javascript - 为什么touchevent不在手指按下的中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20669998/