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

Question

我正在考虑使用 <canvas> API 制作一个简单的网页游戏。我查看了 JavaScript 库，用于直接渲染到画布上的 GUI 元素，发现一些看起来不错，例如Zebra，但我更愿意坚持使用在画布上渲染的标准 DOM 控件。但是，我遇到了鼠标输入被 <div> 捕获的问题，我用来包含我想要使用的按钮、文本框等。

考虑下图，或转到此小提琴以查看我目前的代码。

_{（来源：ekardnt.com）}

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

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

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

Answer 1

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

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

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