画布上的触摸事件并非总是在iPad/iOS10上正常发射

我已经在iOS 10的ipad air上用Web应用程序展示了奇怪的触摸行为，其中有时在画布上绘制的对象上的事件不会触发。画布上的触摸事件并非总是在iPad/iOS10上正常发射

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

产生这个简单的例子：

的rectancle左上角是0,0，右下是5,5。触摸每个矩形应该记录它的标识符，但有些只是不想触发touchend事件（并且它们在我重新加载页面之前不会触发，然后随机选择其他矩形以用于故障...）。

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

现在，这是在为AppleWebKit一个已知的错误，因为iOS的10？或者我在这里错过了什么？

来源

2016-12-31 destiny

在新的ios10中有一个错误（或非常奇怪的行为）。这是已知的bug，为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-02 12:19:52 lavrton

太感谢你了，这个问题解决了:) – destiny

画布上的触摸事件并非总是在iPad/iOS10上正常发射

回答

相关问题