Нажатие / нажатие кнопки CreateJS не сработает при воспроизведении целевого фильма при mousedown/pressmove
У меня есть проект, в котором мне нужно сделать флеш фильм в виде интерактивной игры. Поскольку Flash уже (или скоро будет) устарел для большинства браузеров, я решил, что эта игра должна быть основана на HTML5/JS. Поскольку большая часть графики и анимации уже сделаны в этом Flash-фильме (и у меня есть его источник), я разрабатываю его с использованием технологий Adobe Flash и CreateJS (HTML5 + Canvas + JS). Пока мне очень нравится это решение, хотя у меня есть проблема, которую я пока не могу решить. Игра представляет собой простую игру соответствия. Проблема, которую я имею, кратко описана в названии вопроса, и я постараюсь объяснить ее здесь более подробно:
label.on('mousedown', function() {
//this.image.bg.gotoAndStop(2);
});
label.on('pressmove', function(evt) {
this.x = getStageX(evt.stageX);
this.y = getStageY(evt.stageY);
currentStage.setChildIndex(this, currentStage.getNumChildren() - 1);
stage.update();
});
label.on('pressup', function(evt) {
console.log('Hi! I'm mouseup event!')
this.x = labelInitX;
this.y = labelInitY;
this.image.bg.gotoAndStop(0);
});
Выше вы можете видеть упрощенные 3 обработчика событий, которые я использую. Все работает нормально, пока я не раскомментирую вторую строку - //this.image.bg.gotoAndStop(2);, Когда я делаю это, pressup событие в основном не срабатывает, что довольно странно, потому что иногда оно срабатывает (2-3 раза из 10), поэтому метка остается с указателем, пока я не нажму кнопку еще раз. Это какая-то ошибка или я просто не понимаю что-то о CreateJS и его обработчиках событий. Я пробовал разные комбинации этого. Используемый click вместо pressupразмещение this.image.bg.gotoAndStop(2); внутри pressmove обработчик. Замена pressmove обработчик с stage.on('stagepressmove', handler), Ни один не работал. this.image.bg.gotoAndStop(2); - эта вещь просто обновляет таймфрейм (изменяет фоновое изображение метки). Я могу изменить это изображение программно (без воспроизведения таймфреймов), и я почти уверен, что проблема будет исправлена, хотя я хотел бы понять для себя, что здесь не так или что я делаю неправильно с обработчиками событий.
Еще одна, менее важная вещь, но было бы полезно знать, почему, когда pressmove событие выполняется, объекты CreateJS прекращают получать триггеры событий о rollover или же mouseover? В DOM по умолчанию всплывающее окно событий работает до тех пор, пока вы не остановите его с помощью stopPropagation. Как это работает здесь с CreateJS? Кажется, что пузыри просто отключены здесь по умолчанию. Как я могу включить его?
2 ответа
Я думал, что мог бы пролить некоторый свет на то, что я думаю, что происходит.
Нормальные события мыши "щелчок", "mouseup", "rollover", "rollout" и т. Д. Все функции на этапе определяют, какой была "цель" события мыши по умолчанию, цель - объект самого низкого уровня, с которым взаимодействуют с. Если содержимое изменяется, когда мышь не работает, оно не будет считаться одной и той же целью при наведении мыши. Поскольку положения не перепроверяются без перемещения мыши, события mouseover, mouseout, rollover и rollout могут также работать странным образом.
И наоборот, событиям "pressmove" и "pressup" не важно, что находится под мышью, когда что-то нажимается. Цель всегда будет той, которая была нажата, что позволяет вам перемещать мышь из объекта (или даже удалять его) и по-прежнему получать от него события. Это также гарантирует, что вы получите событие нажатия, даже если вы отпускаете за пределы объекта.
Как упомянул @RandyPrad, hitArea может решить вашу проблему. Указывая область попадания, вы переопределяете содержимое клипа, поэтому вашей целью всегда должен быть контейнер (MovieClip), а не его содержимое. Таким образом, независимо от того, что нажимается внутри мувиклипа, это одна и та же цель, когда вы отпускаете. Вы также можете получить тот же эффект, используя свойство mouseChildren.
movieClip.mouseChildren = false;
Надеюсь, это поможет!
Пожалуйста, проверьте область нажатия кнопки.
я думаю, что вы играете изображение внутри BTN анимирует
пожалуйста, используйте эту ссылку http://www.createjs.com/tutorials/Mouse%20Interaction/hitArea.html