javascript - Canvas 上的触摸事件在 ipad/iOS10 上并不总是正确触发

Question

我在装有 iOS 10 的 iPad Air 上使用 Web 应用程序时遇到了奇怪的触摸行为，有时在 Canvas 上绘制的对象上的事件不会触发。

为了缩小问题范围，我创建了一个简单的测试用例，我在 Canvas 上绘制了 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();

生成这个简单的示例:

矩形左上角为 0,0，右下角为 5,5。触摸时，每个矩形都应该记录它的标识符，但有些矩形只是不想触发 touchend 事件(并且它们一直不会触发，直到我重新加载页面，然后随机选择其他矩形以进行故障...)。

我这里有一个代码笔: http://codepen.io/destiny84/pen/PWYbeO

现在这是自 iOS 10 以来 AppleWebKit 上的一个已知错误吗？或者我在这里遗漏了什么？

Answer 1

新的 ios10 中有一个错误(或非常奇怪的行为)。这是 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;
}