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

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给出了元素相对于你的板的位置,但你想要它相对于body,所以使用下面给出的代码

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

参考