Почему touchhevent не находится в середине нажатия пальца?

Я слушаю прикосновения, и когда я настраиваю значения pageX/pageY с layerX/layerY, точка показывает, как вверху круга от моего касания (мой палец), а не от середины.Почему touchhevent не находится в середине нажатия пальца?

//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) показывает круг с большим радиусом и «х» в середине что?
Зачем мне нужно комбинировать координаты слоя и страницы, чтобы получить те же значения, что и у меня на координатах слоя mouseEVent?
Что такое правильный способ получить элемент внутри элемента touchEvent vis 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);

источник

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

Почему touchhevent не находится в середине нажатия пальца?

ответ

Смежные вопросы