一个div阻止了鼠标事件

Question

我在一个富HTML应用程序中遇到了一些关于鼠标事件的问题。

有一个大而又半透明的div，它覆盖了屏幕的一半（该死的设计师）。我们称之为A。

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

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

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

虽然这可能可以通过一些解决方法来解决，但问题在于：

1.这个bug出现在一个自制的Javascript引擎中。我知道B，但我不应该知道站在B中的C元素（或它们的id）。 因此，我既不能使用坐标技巧，也不能使用if/else解决方法。

2.该应用程序应该在电视上运行（在一个奇怪的Opera版本中）。所以没有“pointer-events”CSS技巧。

3.请不要告诉我重新设计我的应用程序：）

我试着处理（使用和不使用jQuery）从A发出的事件，并将其触发到B。它起作用，但然后B不会将其转发给其C子元素，再次强调，我事先不知道它们。

- Aurel

---

我事先不认识他们，那么我们该如何得知呢？ - Jai

请分享你的代码。 - Slytherin

CSS z-index，使您的B容器高于A。 - jammykam

@Teemu 我不知道，我认为设计有缺陷，应该在诉诸“hack”之前解决这个问题，但他们不想这样做，所以... - jammykam

pointer-events是一种hack么？ - Fresheyeball

Answer 1

这是你需要做的。大多数浏览器支持css 指针事件。

在这些浏览器上使用：

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

对于不支持此CSS特性的浏览器，请执行以下操作

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

- Fresheyeball

Answer 2

由于您有一个包含一些HTML内容的div1应该监听点击事件，而div2则覆盖在其上方，因此您需要找到点击的坐标，然后根据该坐标单击正确的位置，方法如下：

        $(yourdiv).click(function(e) {
            // element that has been clicked.
            var elm = $(this);
  
            // getting the respective
            let x = e.pageX;
  
            // coordinates of location.
            let y = e.pageY;

            let elementsToClick = document.elementsFromPoint(x, y);
            for (let element of elementsToClick) {
                //Implement the function below
                if ((this !== element) && shouldBeClicked(element)) {
                    element.click();
                }
            }
        });

- Lajos Arpad

Answer 3

或者标签内：style="pointer-events: none;"

- Aginjith GJ