1

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

考虑下面的图片，或者去这个小提琴看看我到目前为止的代码。

截屏
（来源：ekardnt.com）

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

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

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

4

1 回答 1

5

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

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

#buttons {
    /* ... */
    pointer-events: none;
}
#buttons button {
    pointer-events: auto;
}
于 2013-10-18T20:55:44.473 回答