3

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

<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 。请帮我

4

2 回答 2

7

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

到目前为止，在我所看到的每种情况下都有效的另一种解决方案是使用

var rect = canvas.getBoundingClientRect();
evX = ev.targetTouches[0].pageX - rect.left,
于 2018-06-28T09:53:42.917 回答
5

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

参考

于 2013-06-18T09:48:11.207 回答