javascript - 检测未处理的鼠标事件

Question

这个问题可能比标题让您相信的要复杂一些，但最终它确定了那个问题。但首先让我向您展示更大的图景:

我在我的应用程序中使用 chromiums 渲染/内容/javascript 引擎作为用户界面。不过，在用户界面下方是一个真实的 3d 世界，也需要了解交互信息。因此，您可以将我的用户界面想象成一个正文透明的常规 html 页面。因此，每当我收到用户界面的消息(如鼠标移动、鼠标按下等)时，我都需要能够检测该消息是否由用户界面处理，或者是否应该传播到“下方”的世界。所有这些只需要在 chrome 中工作，其他浏览器并不重要。

到目前为止，我有以下想法(我一直以鼠标移动为例):

• 将鼠标移动处理程序附加到窗口(或 html 或正文)，并在其点击时 -> 传递给应用程序。这里的问题是，无论是否处理，事件都会向上传播链

• 将鼠标移动处理程序附加到窗口并检查事件目标是 html 还是 body。这里的问题是，如果我有一个 tansparent 容器 div，它只用于定位或排列子节点，即使它悬停，我也会得到这个元素，即使它应该去那里的世界

• 将鼠标移动处理程序附加到窗口，用属性标记不应捕获鼠标的元素(如透明 div)，并在鼠标移动处理程序中检查目标是否具有此类属性。如果是，则触发该事件，否则将被处理。这里的问题是，如果这些 nomouse-elements 之一位于想要捕获鼠标的元素上，我会错过它

• 将鼠标移动处理程序附加到窗口，用属性标记不应捕获鼠标的元素。向所有不具有 no-mouse 属性的元素添加鼠标移动处理程序并将属性设置为 true。在窗口鼠标处理程序中检查是否设置了事件对象中的该属性。我认为这可行。

我最后的想法可行吗？您知道实现此目标的更好方法吗？提前致以问候和感谢。

Answer 1

您可以尝试在整个屏幕上制作一个透明的 div 并将鼠标处理程序附加到它上面。使用 z-index 将可点击元素放在它前面。

全屏div CSS:

html, body {
    weight: 100%;
    margin: 0;
}

#whole-screen {
    min-height: 100%; 
}