如何在 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 方法从返回子项。

但是，从文档中：

注意：在 EaselJS 0.7.0 中，mouseEnabled 属性将不起作用 正确使用嵌套容器。请查看最新的下一个 版本 以获取已解决此问题的更新版本。这 修复将在下一个版本的 EaselJS 中提供。