Kinetic JS touchstart/touchend путаница на ipad

У меня возникли проблемы с отладкой этой проблемы: если вы проверите этот 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();
                    });

touch touchstart kineticjs
person RooWM    schedule 18.12.2012    source источник
comment
Даже на сенсорном учебнике на сайте: html5canvastutorials.com/kineticjs/html5- canvas-mobile-events откройте это на своем iPad, коснитесь красного круга и уберите палец — событие touchstart останется, пока вы снова не коснетесь круга. Может быть, есть какой-то способ создать скрипт, который говорит: «Если touchmove выходит за пределы холста, то touchend»?   -  person RooWM    schedule 18.12.2012

Ответы (1)


arrow_upward
2
arrow_downward

Я едва новичок в кинетике, но я попробую, так как вопрос некоторое время оставался без ответа.

К сожалению, события касания и мыши не совпадают друг с другом настолько, насколько вы могли бы надеяться. «Touchstart» аналогичен «mousedown», а не «mouseover», а «touchend» похож на «mouseup», а не «mouseout». Я сталкиваюсь с аналогичной проблемой в своем собственном коде.

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

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

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

person d2point7    schedule 16.02.2013
comment
На самом деле я успешно использовал только «tap»: html5-canvas-mobile-события - person RooWM; 19.02.2013