畫布上的觸摸事件並非總是在iPad/iOS10上正常發射

我已經在iOS 10的ipad air上用Web應用程序展示了奇怪的觸摸行爲，其中有時在畫布上繪製的對象上的事件不會觸發。畫布上的觸摸事件並非總是在iPad/iOS10上正常發射

爲了縮小這個問題，我創建了一個簡單的測試用例，我在畫布上繪製了25個直角座標，每個都有一個附加的事件處理函數。現在，當我點擊直角座標時，有些不會觸發事件，所以事件處理程序中的代碼永遠不會執行。總是至少有1或2個矩形表現不正常（主要是更多），哪些矩形會隨着每次重新加載而發生變化。

底層div上的處理程序總是觸發一個觸摸事件。

當我有一個更復雜的設置，有時事件將註冊在底層。但再次，只有的幾個的矩形。

我使用Konva.js作爲庫（之前使用kineticjs，相同的行爲）。

這是我的代碼：

TheStage = new Konva.Stage({ 
    container: "stageContainer", 
    width: 800, 
    height: 350, 
    scaleX: 1, 
    scaleY: 1, 
}); 
TestLayer = new Konva.Layer(); 
TheStage.add(TestLayer); 

var Size = 70; 
var i = 0;  
for (y = 0; y < 5; y ++) 
{ 
    for (x = 0; x < 5; x++) 
    { 
     { 
      var rec = new Konva.Rect 
      ({ 
       x:  Size*x , 
       y:  Size*y, 
       width: Size, 
       height: Size, 
       fill: 'red', 
       opacity: 0.04*i, 
          stroke: 'white', 
       id:  x+','+y 
      }); 
      rec.on('mouseup touchend', function(evt){ 
       $('#cons').append('rectangle clicked: '+evt.target.id()+'<br />') ; 
      }); 
      TestLayer.add(rec); 
      i++; 
     } 
    } 
} 
TheStage.draw();

產生這個簡單的例子：

的rectancle左上角是0,0，右下是5,5。觸摸每個矩形應該記錄它的標識符，但有些只是不想觸發touchend事件（並且它們在我重新加載頁面之前不會觸發，然後隨機選擇其他矩形以用於故障...）。

我有一個在這裏codepen： http://codepen.io/destiny84/pen/PWYbeO

現在，這是在爲AppleWebKit一個已知的錯誤，因爲iOS的10？或者我在這裏錯過了什麼？

來源

2016-12-31 destiny

在新的ios10中有一個錯誤（或非常奇怪的行爲）。這是已知的bug，爲KonvaJS https://github.com/konvajs/konva/issues/187

作爲一種變通方法，你可以試試這個（你的代碼在什麼地方添加以下代碼）：

Konva.Util.getRandomColor = function() { 
    var randColor = (Math.random() * 0xadcea0 << 0).toString(15); 
    while (randColor.length < 6) { 
     randColor = ZERO + randColor; 
    } 
    return '#' + randColor; 
}

來源

2017-01-02 12:19:52 lavrton

太感謝你了，這個問題解決了:) – destiny

畫布上的觸摸事件並非總是在iPad/iOS10上正常發射

回答

相關問題