如何停止easljs中的事件泡沫? [英] How to stop the event bubble in easljs?

问题描述

我在舞台上有一个mousedown事件侦听器，在形状上有mousedown事件侦听器.当我单击形状时，舞台上的mousedown事件侦听器也会触发吗?该如何解决?

I have a mousedown event listener on stage and a mousedown event listener on a shape.when I click on the shape, the mousedown event listener on stage will also fire? How to solve this?

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

推荐答案

stagemousedown事件是一个特殊事件，无论单击什么，总是捕获阶段鼠标的交互.如果您只想在不单击舞台上的孩子时收到该事件，则可以使用其他方法.

The stagemousedown event is a special event to always capture stage mouse interaction, regardless of what is clicked. If you would like to ONLY receive that event when a child on the stage is not clicked there are other approaches.

一个建议是添加一个相当于舞台大小的舞台级子级，并在其上侦听鼠标事件.然后，您可以检查目标以查看单击(或未单击)的内容

One suggestion would be to add a stage-level child that is the size of the stage, and listen for mouse events on it. You can then check the target to see what was clicked (or not clicked)

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

这篇关于如何停止easljs中的事件泡沫?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！