javascript - 如何停止 easljs 中的事件气泡？

Question

我在舞台上有一个 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);

Answer 1

stagemousedown 事件是一个特殊事件，它始终捕获舞台鼠标交互，无论单击了什么。如果您只想在未点击舞台上的 child 时接收该事件，还有其他方法。

一个建议是添加一个舞台大小的舞台级子级，并监听其上的鼠标事件。然后您可以检查目标以查看点击(或未点击)的内容

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