Question

我使用createjs（img1和img2在同一位置，但z索引不同）创建了两个以图像为源的形状。一个图像位于另一图像的顶部，即画布中img1上的img2。下面的图片具有点击事件，即img1具有正常运行的点击事件。但是当我在img1上启用img2（没有任何单击事件）时，鼠标单击事件会通过顶部图像工作。如果将点击事件添加到img2中，则它将正常工作。强制向每个图片添加点击事件以避免点击图片的行为。

代码：

[function test(){
        var btnContainer=new createjs.Container();
        btnContainer.mouseChildren=true;

        var shape = new createjs.Shape();        
        shape.graphics.clear().beginBitmapFill(loader.getResult("play-btn")).drawRect(0,0,291,98);//"no-repeat"
        shape.x=shape.y=200;
        shape.mouseEnabled =true;
        shape.addEventListener("click", playClick);


        var shape1 = new createjs.Shape();        
        shape1.graphics.clear().beginBitmapFill(loader.getResult("play-btn")).drawRect(0,0,291,98);//"no-repeat"
        shape1.x=shape1.y=250;
        shape1.mouseEnabled =true;
        shape1.addEventListener("click", playClickShape1);



        btnContainer.addChild(shape,shape1);


        gameStage.AddChildWidget(btnContainer);

    }


    function playClick(event)
    {
        console.log("\[playClick\] Start");
        ReadXMLFile();
    }
    function playClickShape1(event)
    {
        console.log("\[playClickShape1\] Start");
    }

Answer 1

如果某张图片叠加了其他内容（作为点击处理程序），则不会被注册，因为最上面的图片会阻止点击。它不会将点击传播到网站底部。尝试将pointer-events:none CSS规则添加到不想注册点击事件的顶部图像中，底部的CSS规则应该是可单击的。

Answer 2

@Sebastian的答案对于DOM元素是正确的（使用CSS解决方案）。

如果两个图像都是Canvas中的位图（通过EaselJS），则存在类似的限制。任何带有“点击”事件的内容都会阻止点击以下元素。但是，与HTML不同，如果元素上没有鼠标事件，它将不会阻止鼠标事件（默认情况下，基本上是pointer-events:none。

如果要确定是否在任何元素上发生了单击（无论是否分层），则可以侦听舞台上的单击，然后使用getObjectsUnderPoint()来确定单击的内容，然后可以检查是否有一个（或两者）都被点击了。

stage.on("stagemouseup", function(event) {
    var objs = stage.getObjectsUnderPoint(event.stageX, event.stageY);
    for (var i=0, l=objs.length; i<l; i++) {
      var obj = objs[i];
      if (obj == firstElement || obj == secondElement) { doSomething(); break; }
    }
);

文档： https://createjs.com/docs/easeljs/classes/Container.html#method_getObjectsUnderPoint

鼠标单击顶部图像

2 个答案: