如何确定通过JavaScript触摸事件（或鼠标事件）真正的XY共同ORD？(How to dete

我一直对触摸事件，并有一些代码很好地工作，直到画布不会在左上角开始。只要我之前添加任何东西，报告的事件是由画布的位置偏移。

我周围绘制触摸是其中一个圆圈确定这一点。圆总是从屏幕的左上角画布的偏移抵消。

看着对触摸启动的情况下，我可以看到，有一个pageY可用（Chrome浏览器中，使用USB调试）。但是，当我谷歌，似乎这不是标准的一部分，似乎有一些争论，这可能贬值（虽然我不能找到一种方式或其他）。

所以我的问题是什么是最好的跨浏览器的方法来解决这个问题（主要问题是Safari和Chrome，即WebKit的，Firefox是一个不错的）？

发生鼠标事件，为此，我创建了一个同样的问题，这个问题的jsfiddle 。但是我不知道，如果相同的属性可用于鼠标事件和触摸事件。

我要指出，我知道我可以硬编码的偏移和问题就解决了，但是我正在寻找使用手头上的信息，而不需要特定于我的html任何硬连接代码的解决方案。

要重新创建的jsfiddle的HTML，CSS和Javascript如下：

<div class="title"></div>
<div class="container">
  <canvas id="myCanvas"></canvas>
</div>

CSS：

body {
  background-color: #ff0000;
  margin: 0px;
}

canvas {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background-color:#000;
}

.title {
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 40px;
  background-color: #888;
}

.container {
  width:auto;
  text-align:center;
  background-color:#777;
  width:100%;
  position:absolute;
  top:40px;
  left:0px;
  bottom:0px;
}

使用Javascript：

var onMouseDown = function(e) {
    draw(document.getElementById('myCanvas').getContext('2d'), e.clientX, e.clientY);
}

$(function () {
    document.getElementById('myCanvas').addEventListener('mousedown', onMouseDown, false);
});


function draw(ctx, x, y) {
ctx.canvas.width = ctx.canvas.offsetWidth; 
ctx.canvas.height = ctx.canvas.offsetHeight;      

  var radius = 50;
  var lineWidth = 15;
  var r = 255;
  var g = 75;
  var b = 75;
  var a75 = 0.05;

  var adj = Math.abs(lineWidth / 2);

  rad = radius + adj;

  var stop1 = (rad - lineWidth) / rad;
  var stop2 = 0;
  var stop3 = stop1 + (1 - stop1) / 2;
  var stop4 = 0;
  var stop5 = 1;

  stop2 = stop3 - (stop3 - stop1) / 2;
  stop4 = stop3 + (stop5 - stop3) / 2;

  var radgrad = ctx.createRadialGradient(x, y, 0, x, y, rad);

  radgrad.addColorStop(stop1, 'rgba(' + r + ',' + g + ',' + b + ', 0)');
  radgrad.addColorStop(stop2, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop3, 'rgba(' + r + ',' + g + ',' + b + ', 1)');
  radgrad.addColorStop(stop4, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop5, 'rgba(' + r + ',' + g + ',' + b + ', 0)');

  ctx.fillStyle = radgrad;
  ctx.arc(x, y, rad, 0, 2 * Math.PI, true);
  ctx.fill();
}

Answer 1:

这应该工作： http://jsfiddle.net/DG4fb/3/

你的画布的顶部和左侧不clientX == 0; clientY == 0; clientX == 0; clientY == 0; 所以你需要计算偏移。哪里是你的画布的左上角？这是它的offsetLeft和offsetTop加上其offsetParent的价值及其offsetParent.offsetParent的价值，和和。这是什么recursiveOffsetLeftAndTop功能为你处理。

Answer 2:

如果我们的用户pageX属性和PageY代替ClientX和ClientY，它完美地工作在我的情况...

        var offsets = recursiveOffsetLeftAndTop(canvas);
        var x = evt.targetTouches[0].pageX - offsets.offsetLeft;
        var y = evt.targetTouches[0].pageY - offsets.offsetTop;

谢谢你的解决方案。