html5 - 获取 Canvas 触摸事件的正确坐标

我正面临着获取触摸事件正确坐标的问题。这是我的标价

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

以及代码，注意我已经将touch event listener添加到licanvas

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

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

最佳答案

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