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

Question

我正在考虑使用＆lt; canvas＆gt;创建一个简单的网页游戏。 API。我已经在JavaScript库中查看了直接渲染到画布的GUI元素，并发现了一些看起来不错的文件，例如Zebra，但我更喜欢坚持在画布顶部渲染的标准DOM控件。但是，我遇到了鼠标输入被我用来包含我想要使用的按钮，文本框等的＆lt; div＆gt;所困的问题。

请考虑以下图片，或者到this fiddle查看我的代码到目前为止。

Screenshot http://www.ekardnt.com/capture.PNG

红色背景是画布元素，蓝色背景是带有四个按钮的div。 canvas和div都具有“position：absolute”CSS属性。我已经添加了对canvas'和div的onclick事件的简单alert（）调用，以显示哪些元素正在捕获输入。

我想要的是只要点击没有落在按钮上就会调用画布'onclick。也就是说，如果我点击按钮容器div的外露蓝色背景，我希望click事件“落到”画布上。然而，目前，当我点击一个按钮并且当我点击蓝色区域时，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;
}