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.

event.stopPropagation() seems to be correct approach for this scenario. Can you share code so we can see what is going on. — Thanthu, Mar 18 '19 at 07:11

score 0 · Answer 1 · answered Mar 18 '19 at 07:28

0

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>

answered Mar 18 '19 at 07:28

לבני מלכה

15,925
2
23
47

The problem is that the canvas is being dynamically generated from the construct 2 editor. So it is not convenient for me to add any class or id to the canvas and add a pointer event. P.S. Pointer events to none did not work – Mohit Kamal Mar 18 '19 at 08:08

score 0 · Answer 2 · answered Mar 18 '19 at 16:50

0

Add in the css property pointer-events: none

answered Mar 18 '19 at 16:50

Luca Spezzano

371
2
14

score 0 · Answer 3 · answered Apr 13 '19 at 13:34

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!

Disable click event propagation on construct 2 html canvas

3 Answers3