为什么手指不在手指按压的中间？

我正在听touchevents，当我调整pageX/pageY值与layerX/layerY，点显示在我的触摸（我的手指），而不是中间的圆的顶部。为什么手指不在手指按压的中间？

//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的/镀铬）时，显示了一个大的半径和“×”的圆圈在中间那？
为什么我需要组合图层和页面坐标以获得与我在mouseEVent的图层坐标上获得的值相同的值？
在touchEvent vs mouseevent的元素中获取点的正确方法是什么？

THE CODE

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

来源

2013-12-18 Don Rhummy

的问题是偏移量。这不是必需的。该抵消似乎并入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; 
}

来源

2013-12-18 23:31:49

为什么手指不在手指按压的中间？

回答

相关问题