iOS和Android中滚动页面的错误触摸事件偏移

Question

我们有一个网页，其中包含一些div / canvas标签，允许用户绘制：

 <div id="Drawing" class="FormField" style="position: absolute; top: 444px; left: 121px;
      width: 302px; height: 185px; font-size: 10pt;">
      <canvas id="DrawingCanvas" class="InkFormField" width="302" height="185" style=""></canvas>
 </div>
 <div id="Picture" class="FormField" style="position: absolute; top: 915px; left: 121px;
      width: 302px; height: 167px; font-size: 10pt;">
      <canvas id="PictureCanvas" class="InkFormField" width="302" height="167" style=""></canvas>
 </div>

最初不可见第二个div / canvas（顶部：915px），但可以滚动到它并上墨。

该图形是非常简单的代码，适用于桌面浏览器 （使用适当的鼠标事件）。 对于iPad，我们需要使用触摸事件来确定绘制点的位置：

        var touchX = e.changedTouches[0].screenX - canvasLeft;
        var touchY = e.changedTouches[0].screenY - canvasTop;

（其中canvasLeft和canvasTop是画布的页面相对偏移量）。

即使滚动到第二个div / canvas，一切都可以正常工作。

但是， 一旦将外部添加到上述代码中（带有溢出：auto ）， 则在div滚动后， touchX和touchY 值不再正确 ：

  <div style="overflow: auto">
     <div id="Drawing" class="FormField" style="position: absolute; top: 444px; left: 121px;
          width: 302px; height: 185px; font-size: 10pt;">
          <canvas id="DrawingCanvas" class="InkFormField" width="302" height="185" style=""></canvas>
     </div>
     <div id="Picture" class="FormField" style="position: absolute; top: 915px; left: 121px;
          width: 302px; height: 167px; font-size: 10pt;">
          <canvas id="PictureCanvas" class="InkFormField" width="302" height="167" style=""></canvas>
     </div>
  </div>

事实上，它们似乎完全偏离了滚动量！ 根据文档，screenY属性应考虑滚动（但它可能是指页面滚动，而不是外部div滚动）。

触摸事件是否有其他属性来报告相对于滚动div的x和y偏移，以便可以正确绘制点？

或者，是否有办法跟踪滚动量，以便可以将适当的偏移量应用于touchX和touchY的计算？

Answer 1

这是我的鼠标/触摸代码。 试试看。 它应该为您工作：

通过触摸事件，您可以执行以下操作：'

if (e.targetTouches) e = e.targetTouches[0];

在您打电话之前。

function getMouse(e, canvas) {
  var element = canvas, offsetX = 0, offsetY = 0, mx, my;

  // Compute the total offset
  if (element.offsetParent !== undefined) {
    do {
      offsetX += element.offsetLeft;
      offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
  }

  // Add padding and border style widths to offset
  // Also add the <html> offsets in case there's a position:fixed bar
  offsetX += _stylePaddingLeft + _styleBorderLeft + _htmlLeft;
  offsetY += _stylePaddingTop + _styleBorderTop + _htmlTop;

  mx = e.pageX - offsetX;
  my = e.pageY - offsetY;

  return {x: mx, y: my};
}

这些偏移量如下所示，假设您的画布被称为“画布”：

_stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)      || 0;
_stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)       || 0;
_styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10)  || 0;
_styleBorderTop   = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10)   || 0;
// <html> can have a margin (typically seen with position:fixed bars)
var html = document.body.parentNode;
_htmlTop = html.offsetTop;
_htmlLeft = html.offsetLeft;

iOS和Android中滚动页面的错误触摸事件偏移

问题描述

1 个解决方案

解决方案1
0 2012-03-08 02:29:51

iOS和Android中滚动页面的错误触摸事件偏移

问题描述

1 个解决方案

解决方案1 0 2012-03-08 02:29:51

解决方案1
0 2012-03-08 02:29:51