为什么触摸事件不在手指按压的中间

Why is touchevent not in the middle of the finger press?

本文关键字：中间 手指 触摸 事件 为什么      更新时间：2023-09-26

>我正在监听触摸事件，当我用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）时半径为"1"，显示一个半径较大的圆圈，而"x"位于中间？

  2. 为什么我需要组合图层和页面坐标才能获得与仅使用mouseEVent的图层坐标获得的值相同的值？

  3. 在触摸事件与鼠标事件上获取元素内点的正确方法是什么？

代码

索引.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>

触摸.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;
}
相关文章：