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

Question

我在使用 ipad air 和 iOS 10 时遇到了网络应用程序的奇怪触摸行为，有时在 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;
}

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

touch events on canvas not always properly firing on ipad / iOS10

html

javascript

canvas

ios

konvajs