如何停止 easljs 中的事件泡沫？答案

【问题标题】：How to stop the event bubble in easljs?如何停止 easljs 中的事件泡沫？
【发布时间】：2013-10-17 15:26:09
【问题描述】：

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

【解决方案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");
    }
});

【讨论】：

【解决方案2】：

这是移除舞台中形状对象的方法之一。

stage.removeChild(shape);

你可以把它放在一个函数中，当你想删除对象时调用它。

如果您需要，请告诉我。

【讨论】：

看来你没明白我的意思。

【解决方案3】：

也许有更好的方法，但是当你捕捉到“stagemousedown”事件时，你可以检查鼠标下是否没有物体：

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

【讨论】：

这个想法似乎不错。但是在 hitArea 上的 mousedown 也会得到“stage.getObjectUnderPoint(e.stageX,e.stageY) == null”。
我在这里试过：jsfiddle.net/f6TzD/7。我设置了一个大于捕获鼠标事件的对象的 hitArea。而且似乎在我点击 hitArea 的任何地方仍然可以识别该对象。
我发现了问题。当你使用最新的createjs或easeljs时，它不会正常工作。但是当你使用jsfiddle中的createjs时，它可以正常工作。
那我可能有一个棘手的解决方案。对于所有未添加到舞台的对象，您可以添加“mouseover”和“mouseout”事件侦听器，您可以在其中将布尔值设置为 true/false。那么 mouseDown 函数中的条件将是 "stage.getObjectUnderPoint(e.stageX,e.stageY) == null && !yourBool"

【解决方案4】：

我想你要找的是stage.mouseEnabled = false:

表示运行鼠标时是否包含该对象互动。将 Container 的子级设置为 false 将当单击该子项时，导致 Container 上的事件不会触发。将此属性设置为 false 不会阻止 getObjectsUnderPoint 方法从返回孩子。

但是，来自docs：

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

【讨论】：