画布上的触摸事件并不总是在 ipad / iOS10 上正确触发答案

【问题标题】：touch events on canvas not always properly firing on ipad / iOS10画布上的触摸事件并不总是在 ipad / iOS10 上正确触发
【发布时间】：2017-05-15 13:40:37
【问题描述】：

我在运行 iOS 10 的 ipad air 上使用 Web 应用程序时遇到了奇怪的触摸行为，有时在画布上绘制的对象上的事件不会触发。

为了缩小问题范围，我创建了一个简单的测试用例，我在画布上绘制了 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 上的一个已知错误吗？或者我在这里错过了什么？

【问题讨论】：

标签： javascript ios html canvas konvajs

【解决方案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;
}

【讨论】：