Щелчок мышью через верхнее изображение - PullRequest
Новая
       9

Щелчок мышью через верхнее изображение

0 голосов
/ 28 января 2019

Я создал две фигуры с изображением в качестве источника, используя createjs (img1 и img2 в одной позиции, но индекс z отличается).одно изображение находится поверх другого изображения, т.е. img2 на img1 на холсте.и изображение ниже имеет событие click, то есть img1 имеет событие click, которое работает нормально.но когда я включаю img2 (без события клика) на img1, событие клика мыши работает через верхнее изображение.если добавить событие клика в 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");
    }

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Ответ от @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

0 голосов
/ 28 января 2019

Если какое-либо изображение накладывается на другой контент, который, как обработчик кликов, не будет зарегистрирован, поскольку верхнее будет блокировать клики.Он не будет распространять клики внизу сайта.Попробуйте добавить к верхнему изображению правило pointer-events:none css, для которого вы не хотите регистрировать события кликов, и то, которое внизу, должно быть кликабельным.

...