Question

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

为了缩小问题范围，我创建了一个简单的测试用例，我在画布上绘制了25个矩形，每个矩形都附加了一个事件处理程序。现在，当我点击rectancles时，有些人不会触发事件，因此事件处理程序中的代码永远不会被执行。总是至少有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事件（并且在我重新加载页面之前它们一直没有触发，然后随机选择其他矩形用于故障... ）。

我在这里有一个codepen： http://codepen.io/destiny84/pen/PWYbeO

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

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;
}

触摸事件在画布上并不总是在ipad / iOS10

1 个答案: