HTML 点事件过滤非交互元素？

Question

我正在考虑使用 API 制作一个简单的网页游戏。我查看了直接呈现在 Canvas 上的 GUI 元素的 JavaScript 库，发现了一些看起来不错的库，例如 Zebra ，但我更愿意坚持使用在 Canvas 顶部呈现的标准 DOM 控件。但是，我遇到了鼠标输入被我用来包含我想使用的按钮、文本框等的

捕获的问题。

考虑下图，或转到 this fiddle到目前为止看到我的代码。

_{(来源:ekardnt.com)}

红色背景是一个 Canvas 元素，蓝色背景是一个有四个按钮的div。 canvas 和 div 都有“position: absolute”CSS 属性。我向 Canvas 和 div 的 onclick 事件添加了简单的 alert() 调用，以显示哪些元素正在捕获输入。

我想要的是当点击没有落在按钮上时调用 Canvas 的 onclick。也就是说，如果我单击按钮容器 div 的暴露蓝色背景，我希望单击事件“落入” Canvas 。然而，目前，当我单击按钮和单击蓝色区域时，都会调用 div 的 onclick - 这是一种明智的默认行为，但对我来说不方便。

有没有办法获得我想要的行为？我已经尝试将 pointer-events: none 添加到 div 的样式中，但是按钮根本不响应输入。

最佳答案

将 pointer-events: none; 添加到 #buttons 容器，并将 pointer-events:auto; 添加到按钮元素。然后单击容器将“落入”，而按钮保持功能。

http://jsfiddle.net/GD4Da/18/

#buttons {
    /* ... */
    pointer-events: none;
}
#buttons button {
    pointer-events: auto;
}

关于HTML 点事件过滤非交互元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19458828/

Answer 1

将 pointer-events: none; 添加到 #buttons 容器，并将 pointer-events:auto; 添加到按钮元素。然后单击容器将“落入”，而按钮保持功能。

http://jsfiddle.net/GD4Da/18/

#buttons {
    /* ... */
    pointer-events: none;
}
#buttons button {
    pointer-events: auto;
}