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事件是一个特殊事件，无论点击什么，始终捕获阶段鼠标交互。如果您只想在未点击舞台上的孩子时接收该事件，则还有其他方法。

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

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

可能有一种更好的方法，但你可以检查当你抓住＆＃34; stagemousedown＆＃34;时，鼠标下是否有物体。事件：

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

Answer 4

我认为你要找的是stage.mouseEnabled = false：

指示在运行鼠标时是否包含此对象互动。对于Container的子项，将此设置为false将单击该子项时，Container上的事件不会触发。将此属性设置为false不会阻止返回子进程的getObjectsUnderPoint方法。

但是，来自docs：

注意：在EaselJS 0.7.0中，mouseEnabled属性不起作用适当地使用嵌套容器。请查看最新的NEXT GitHub中的版本已解决此问题的更新版本。该修复将在EaselJS的下一个版本中提供。

如何在easljs中阻止事件泡沫？

4 个答案: