Disable click event propagation on construct 2 html canvas

Question

I have a construct 2 game export file, in which I append a html file on top of it. I want to disable the on touch/click event of the dynamically generated canvas of the construct 2 game because when I click on the appended html, the click also propagates to the canvas element of the game.

I have used event.stopPropagation() and event.preventDefault() functions, but to no avail.

Answer 1

Use only css as 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>

Answer 2

Add in the css property pointer-events: none

Answer 3

If it's only Construct2 problem I would say add condition to every on click event that checks if the cursor is NOT over HTML element to activate canvas events, and not activate if it is. Since I'm not quite sure where the problem occurs I'll leave it at that, hope it helps!