javascript - 在构造 2 html 画布上禁用点击事件传播

Question

我有一个construct 2 游戏导出文件，我在其中附加了一个html 文件。我想禁用构造 2 游戏动态生成的画布的触摸/单击事件，因为当我单击附加的 html 时，单击也会传播到游戏的画布元素。

我使用了 event.stopPropagation() 和 event.preventDefault() 函数，但无济于事。

Answer 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>

Answer 2

添加css属性pointer-events: none

Answer 3

如果只是 Construct2 问题，我会说为每个单击事件添加条件，检查光标是否不在 HTML 元素上以激活画布事件，如果是则不激活。由于我不太确定问题出在哪里，所以我将把它留在那里，希望它有所帮助！