Отключить распространение события клика на холсте конструкции 2 html

Question

У меня есть файл экспорта игры конструкции 2, в который я добавляю html-файл поверх него.Я хочу отключить событие касания / щелчка динамически сгенерированного холста игры construct 2, потому что когда я нажимаю на добавленный html, щелчок также распространяется на элемент холста игры.

Я использовалФункции event.stopPropagation () и event.preventDefault (), но безрезультатно.

Answer 1

Добавить в css свойство pointer-events: none

Answer 2

Если бы это была только проблема Construct2, я бы сказал, добавить условие к каждому событию при нажатии, которое проверяет, находится ли курсор над элементом HTML, чтобы активировать события холста, и не активировать, если оно есть.Так как я не совсем уверен, где проблема возникает, я оставлю это, надеюсь, это поможет!

Answer 3

Использовать только CSS как pointer-events: none;

function func(){
console.log("clicked");
}

#myCanvas{
    border: 1px solid #000000;
    pointer-events: none;
}
#myCanvas2{
 border: 1px solid #000000;
}

<h2>With Css try to click me..</h2>
<canvas id="myCanvas" width="200" height="100" onclick="func()">
</canvas>


<h2>Without Css try to click me..</h2>
<canvas id="myCanvas2" width="200" height="100" onclick="func()">
</canvas>