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