获取画布触摸事件的正确坐标

Question

我在获取触摸事件的正确坐标时遇到问题。这是我的标记

<div class="board">
<canvas width="595" height="595" id="bgCanvas"></canvas>
<canvas width="595" height="595" id="liCanvas"></canvas>
</div>

CSS

.board{
 width:595px;
 height:595px;  
 position:absolute;
 display:block;
 left:21px;
 top:230px;
}
.board canvas{
position:absolute;
}

和代码，请注意我已经将触摸事件监听器添加到 liCanvas

evX= ev.targetTouches[0].pageX- liCanvas.offsetLeft 

但我没有得到正确的值，我的意思是当我触摸画布的左上角时我想要 evX=0。请帮帮我

Answer 1

当树状结构很简单时，公认的解决方案有效，但在某些情况下（例如我的），当可能有多个嵌套滚动父级时，它不会按预期工作。

另一种适用于我目前看到的所有情况的解决方案是使用

var rect = canvas.getBoundingClientRect();
evX = ev.targetTouches[0].pageX - rect.left,

Answer 2

offsetLeft 给出了元素相对于你的板的位置，但你想要它相对于身体，所以使用下面给出的代码

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

evX= ev.targetTouches[0].pageX- getOffsetLeft(liCanvas); 

Reference