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

Question

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

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); 

Answer 1

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"); 
    } 
}); 

Answer 2

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

stage.removeChild(shape); 

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

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

Answer 3

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

function mouseDown(event) { 
    if (stage.getObjectUnderPoint(event.stageX,event.stageY) == null) { 
     // ... 
    } 
} 

Answer 4

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

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

Однако из docs:

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