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

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

Answer 2

公认的解决方案在树状化很简单时起作用，但是在某些情况下（例如我的），当可以有多个嵌套的滚动父级时，它将无法按预期工作。

到目前为止，在每种情况下都可以使用的另一种解决方案是使用

(X)SUB

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

2 个答案: