Javascript 鼠标单击顶部图像

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

代码：

---

如果某个图像覆盖了作为点击处理程序的其他内容，则不会将其注册为阻止点击的顶部图像。它不会将点击传播到站点底部。尝试将

指针事件：无

css规则添加到顶部图像中，您不希望注册单击事件，底部的一个应该是可单击的

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

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

指针事件：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; }
    }
);

stage.on（“stagemouseup”），函数（事件）{
var objs=stage.getObjectsUnderPoint（event.stageX，event.stageY）；
对于（var i=0，l=objs.length；i请发布一些相关代码
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; }
    }
);