鼠标点击顶部图片

Question

我使用 createjs 创建了两个以图像为源的形状（img1 和 img2 在同一位置，但 z 索引不同）。一张图片在另一张图片之上，即 canvas 中的 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 规则添加到您不想注册点击事件的顶部图像，底部的图像应该是可点击的。

Answer 2

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

如果两个图像都是 Canvas 中的位图（通过 EaselJS），则存在类似的限制。任何带有 "click" 事件的东西都会阻止点击下面的元素。与 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

鼠标点击顶部图片

Mouse click through top image

javascript

createjs

mouseclick-event