Javascript 禁用html5画布单击事件

我有一个canvas元素，在canvas中，如果单击一个按钮，它将打开一个

div

模式。然后，模态上有一些按钮，如果您单击其中一个按钮，并且它也位于画布中某个按钮的上方，那么画布按钮也会被单击

我想禁用画布，但我似乎不能这样做。我曾尝试将css样式应用于

画布

，如下所示：

pointer-events: none

但是画布仍然接受点击。我是否有办法禁用画布，以便在不影响画布的情况下单击模式

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

事件传播-

---

在按钮单击的事件处理程序中，停止事件的传播。

您只需创建一个处理程序，如

const c = document.querySelector("#myCanvas")
c.addEventListener('click', e => {
    if (c.classList.contains('disabled')) {return}
    // Do not perform default action, stop bubbling the event
    e.preventDefault();e.stopPropagation()

    // Mark event as invalid for older browsers
    return false
})

编辑：更具决定性的解决方案

.canvas包装器{position:relative}
.canvas包装：在{content:''之后；位置：绝对；z索引：999；顶部：0；左侧：0；宽度：100%；高度：100%；光标：不允许；指针事件：无}

---

首先，您可以这样设置：

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

如果要在页面加载后禁用，可以执行以下操作

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

---

与其在校园中禁用click事件，只需停止按钮上的click事件冒泡。实际上，我很难重新创建这样一个场景：html按钮位于画布上方，而click事件冒泡到画布元素。。您确定没有其他元素捕获事件吗？或者按钮可能位于画布下？（在这种情况下，你应该给它一个位置和更高的z指数）我将抛出另一个场景。。按钮是否具有相同的ID？modals按钮是否获得点击事件？我正在测试的画布是用

construct 2

构建的，因此我不确定它在后台做什么。这个问题没有用Fixed标记，使用vanilla js声明，我包含jQuery只是为了参考添加

StopperPagation

不起作用，因为我仍然可以单击模式按钮，但画布仍会拾取它。使用不同的解决方案进行编辑，该解决方案可能会在所有情况下都起作用添加

stopPropagation

不起作用，因为我仍然可以单击模式按钮，但画布仍会拾取它。@GetOffmyLaun您可以提供一些代码，以便我们更好地帮助您吗？您可能希望在解决方案中包括

e.stopPropagation

。对于简单的canvas/div，这不是一个问题。

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