javascript - div 正在阻止鼠标事件

Question

我在富 html 应用程序中遇到鼠标事件的一些问题。

我有一个很大的“半透明”div 覆盖了屏幕的一半(该死的设计师)。我们称他为 A。

在这个A div的后面，有一个叫B的大容器。

在 B 内部，有 4 个 div 应该响应 mouseover 和 mouseout 事件。我们可以称它们为 C1、C2、C3 和 C4。

不幸的是，大胖子 A div 阻止了我所有的 Javascript/jQuery 事件。

这可以通过一些变通办法解决，但问题是:

• 这个错误出现在一个自制的 Javascript 引擎中。我知道 B，但我不应该知道 B 中的 C 元素(或它们的 ID)。 所以我既不能使用坐标技巧，也不能使用 if/else 解决方法。
• 该应用程序应该在电视上运行(在一个奇怪的歌剧版本中)。所以没有“指针事件”CSS 技巧。
• 请不要告诉我重新设计我的应用 :)

我尝试处理(使用和不使用 jQuery)来自 A 的事件并将其触发给 B。它可以工作，但 B 不会将它转发给它的 C 子级，再一次，我事先不知道它们.

Answer 1

这就是你要做的。大多数browsers支持 CSS pointer events .

在这些浏览器上使用:

#big-blocking-div {
  pointer-events: none;
}

对于不支持此 css 功能的浏览器执行此操作

#big-blocking-div {
  display : none;
}