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

#javascript #html #css #vue.js #construct-2

#javascript #HTML #css #vue.js #construct-2

Вопрос:

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

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

Ответ №1:

Используйте только 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>

1. Проблема в том, что холст динамически генерируется из редактора construct 2. Поэтому мне неудобно добавлять какой-либо класс или идентификатор в canvas и добавлять событие указателя. P.S. События указателя на none не сработали

Ответ №2:

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

Ответ №3:

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