Kinetic JS touchstart/ касаться путаницы на iPad

Question

У меня возникли проблемы при отладке этой проблемы: если вы посмотрите этот jfiddle на iPad, вы увидите, что можете нажимать на каждый кружок, чтобы изменить содержимое выше. Когда вы держите один круг, вы увидите, что он становится зеленым (обмен изображениями).

http://jsfiddle.net/SWj9m/

Теперь возьмите палец и удерживайте его, а затем перетащите палец вверх или используйте другой палец, чтобы щелкнуть другое кольцо, удерживая предыдущее. Теперь событие касания iPad становится запутанным, и зеленые события (touchstart) остаются, а не уходят. В итоге мы получаем несколько кругов, застрявших в зеленом, что означает, что событие касания никогда не происходило.

Кто-нибудь видел эту проблему раньше или есть идея, как вообще подойти к отладке?

Этот фрагмент показывает события touchstart/end

                    applications.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart applications circle');
                        this.setFill({ image: images.applicationshover});
                        layer.draw();
                    });
                    applications.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup applications circle');
                        this.setFill({ image: images.applicationsimage});
                        layer.draw();
                    });

Answer 1

I'm barely a beginner with kineticjs but I'll take a stab at it since the question has been sitting here unanswered for a while.

Unfortunately the touch and mouse events don't parallel each other as much as you might hope. The "touchstart" is analogous to "mousedown" not to "mouseover," and "touchend" is like "mouseup" not "mouseout." I'm hitting a similar problem in some of my own code.

Лучшая идея, которую я имею для этого, состоит в том, чтобы использовать "наведение мыши" и "движение пальцем", которые кажутся аналогичными. При наведении курсора мыши / касании или запуске / касании в любом кольце установите это кольцо в зеленый цвет и установите все остальные кольца обратно в синий. Кроме того, на mouseup/touchend установите все кольца на синий.

Это все еще оставляет один случай необработанным, когда пользователь касается внешнего кольца, затем выходит на задний план, а затем завершает касание. Вы используете "mouseout", чтобы справиться с этим для рабочего стола, но нет "touchout", чтобы сделать то же самое для ipad. В моем коде для аналогичной ситуации я добавил слушатель для window.touchend. Я не пробовал это, но у меня была еще одна идея - создать слой с прямоугольником размером с сцену в качестве фонового слоя и наблюдать за касанием, возникающим на этом объекте.

Если это не лучший способ приблизиться к этому, то, надеюсь, кто-то, кто действительно знает, о чем они говорят, вмешается, чтобы поправить меня!