禁用 html5 canvas 点击事件

Question

我有一个画布元素，在画布中，如果单击按钮，它会打开一个div模式。然后，该模式上有一些按钮，如果您单击其中一个按钮，并且它也在画布中的按钮上方，则也会单击画布按钮。

我想禁用画布，但我似乎无法这样做。我尝试过将 css 样式应用到canvas类似的情况：

pointer-events: none

但画布仍然接受点击。有什么方法可以禁用画布，以便我可以单击模式而不影响画布？

画布包含一个游戏，并且游戏并不总是相同，因此我无法访问画布的代码来禁用画布中的按钮。

Answer 1

首先，你像这样设置它：

<div class='your-canvas-wrapper'>
<canvas>
...
</canvas>
</div>

如果您想禁用页面加载。

.your-canvas-wrapper {
    cursor: not-allowed;
    pointer-events: none;
}

如果你想在页面加载后禁用，你可以这样做......

$(".your-canvas-wrapper").css("cursor", "not-allowed");
$(".your-canvas-wrapper").css("pointer-events", "none");