禁用HTML5画布点击事件。

Question

我有一个画布元素，在画布上点击按钮时会打开一个

模态框。该模态框上有一些按钮，如果您点击其中一个按钮并且它也在画布上的某个按钮上方，则画布按钮也会被点击。

我想禁用画布，但似乎无法这样做。我尝试对应用css样式，如下所示：

pointer-events: none

但画布仍然接受点击。有没有办法使画布失效，这样我就可以在不影响画布的情况下点击模态框了？

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

- Get Off My Lawn

---

不要停用校园的点击事件，只需停止按钮上的点击事件冒泡即可。 - DrunkWolf

我实际上很难重现一个 HTML 按钮在画布上方并且点击事件冒泡到画布元素的情况... 你确定没有其他元素捕获这些事件吗？或者按钮是否位于画布下方？（如果是这种情况，您应该只需为其设置位置和更高的 z-index） - DrunkWolf

我再提出另一种情况...这些按钮有相同的ID吗？模态框按钮会触发点击事件吗？ - rlemon

我正在测试的画布是用construct 2构建的，所以我不确定它在后台做了什么。 - Get Off My Lawn

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");

- spadelives

---

canvas{ pointer-events: none; } 我认为这就足够了。 - Akin Zeman

Answer 2

您可以创建一个处理程序，例如：

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-wrapper {position:relative}
.canvas-wrapper:after {content:'';position:absolute;z-index:999;top:0;left:0;width:100%;height:100%;cursor: not-allowed;    pointer-events: none}

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

这将在你的canvas元素上创建一个虚假阻止元素，以此方式收集所有点击事件，使它们甚至不能触及canvas元素（因为该元素位于此元素下方）。

- AP.

---

此问题未标记为 [tag:jquery]。 - rlemon

固定的，使用原生JS声明，我只是为了参考而包含了jQuery。 - AP.

添加stopPropagation并没有起作用，因为我仍然可以单击模态框按钮，但画布仍然会捕获到它。 - Get Off My Lawn

使用不同的解决方案进行编辑，应该在所有可能性中都能正常工作。 - AP.

Answer 3

事件传播 - https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation

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

- Zac

---

添加 stopPropagation 不起作用，因为我仍然可以点击模态框按钮，但画布仍然会捕获它。 - Get Off My Lawn

@GetOffMyLawn 你能提供一些代码吗？这样我们就可以更好地帮助你了。你可能需要在你的解决方案中包含 e.stopPropagation。这不是一个简单的画布/ div 的问题。https://jsfiddle.net/7cd14prr/ - Zac