0

我在使用 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 事件（并且在我重新加载页面之前它们不会触发，然后随机选择其他矩形进行故障...）。

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

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

4

1 回答 1

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;
}
于 2017-01-02T12:19:52.130 回答