Как остановить пузырь событий в easljs?

У меня есть прослушиватель событий mousedown на сцене и прослушиватель событий mousedown на фигуре. Когда я нажимаю на фигуру, прослушиватель событий mousedown на сцене также срабатывает? Как это решить?

var stage = new createjs.Stage("test");
stage.addEventListener('stagemousedown',mouseDown);
var shape = new createjs.Shape();
shape.graphics.beginStroke("#000").setStrokeStyle(8,"round").drawRect(0, 0, 100, 100);
shape.addEventListener('mousedown',smouseDown);
stage.addChild(shape);

javascript canvas html5-canvas easeljs
person Tom    schedule 10.10.2013    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Событие stagemousedown — это специальное событие, которое всегда фиксирует взаимодействие с мышью в рабочей области, независимо от того, что было нажато. Если вы хотите ТОЛЬКО получать это событие, когда ребенок на сцене не нажат, существуют другие подходы.

Одно из предложений состоит в том, чтобы добавить дочерний элемент уровня сцены размером со сцену и прослушивать на нем события мыши. Затем вы можете проверить цель, чтобы увидеть, что было нажато (или не нажато)

var stage = new createjs.Stage("canvas");

var bg = new createjs.Shape();
bg.graphics.f("#ddd").dr(0,0,550,400);

var shape = new createjs.Shape().set({x:200,y:200});
shape.graphics.f("#f00").dc(0,0,100);

stage.addChild(bg, shape);
stage.update();

stage.addEventListener("mousedown", function(event){
    if (event.target == bg) {
        console.log("Missed Content");
    } else {
        console.log("Hit Content");
    }
});
person Lanny    schedule 10.10.2013

arrow_upward
0
arrow_downward

это один из способов удалить объект формы на сцене.

stage.removeChild(shape);

вы можете поместить это в функцию и просто вызывать ее, когда хотите удалить объект.

пожалуйста, дайте мне знать, если это то, что вам нужно.

person Mox    schedule 10.10.2013
comment
Кажется, вы не поняли, что я имею в виду. - person Tom; 10.10.2013

arrow_upward
0
arrow_downward

Возможно, есть лучший способ, но вы можете проверить, нет ли объекта под мышью, когда вы перехватываете событие «stagemousedown»:

function mouseDown(event) {
    if (stage.getObjectUnderPoint(event.stageX,event.stageY) == null) {
        // ...
    }
}
person Mister D.    schedule 10.10.2013
comment
Эта идея кажется хорошей. Но при нажатии мыши на hitArea также получается stage.getObjectUnderPoint(e.stageX,e.stageY) == null. - person Tom; 10.10.2013
comment
Я пробовал здесь: jsfiddle.net/f6TzD/7. Я установил hitArea больше, чем мой объект, перехватывающий событие мыши. И кажется, что объект все еще распознается, где бы я ни нажимал на hitArea. - person Mister D.; 10.10.2013
comment
Я обнаружил проблему. Когда вы используете последние версии createjs или wakeljs, она не будет работать правильно. Но когда вы используете createjs в jsfiddle, она работает хорошо. - person Tom; 11.10.2013
comment
Тогда у меня может быть хитрое решение. Ко всем объектам, которые не добавлены на сцену, вы можете добавить прослушиватели событий mouseover и mouseout, где вы устанавливаете логическое значение true/false. Тогда условием в вашей функции mouseDown будет stage.getObjectUnderPoint(e.stageX,e.stageY) == null && !yourBool - person Mister D.; 11.10.2013

arrow_upward
0
arrow_downward

Я думаю, что вы ищете stage.mouseEnabled = false:

Указывает, следует ли включать этот объект при выполнении взаимодействий с мышью. Установка этого параметра в значение false для дочерних элементов контейнера приведет к тому, что события в контейнере не будут срабатывать при щелчке этого дочернего элемента. Установка для этого свойства значения false не препятствует тому, чтобы метод getObjectsUnderPoint возвращал дочерний элемент.

Однако из документов:

Примечание. В EaselJS 0.7.0 свойство mouseEnabled не будет правильно работать с вложенными контейнерами. Пожалуйста, ознакомьтесь с последней версией NEXT на GitHub, чтобы получить обновленную версию, в которой эта проблема решена. Исправление будет предоставлено в следующем выпуске EaselJS.

person aaronjbaptiste    schedule 17.12.2013