jquery div正在阻止鼠标事件

4jb9z9bj  于 2022-12-03  发布在  jQuery
关注(0)|答案(3)|浏览(190)

我在富HTML应用程序中遇到了一些鼠标事件问题。
我有一个巨大的脂肪'半透明' div覆盖了一半的屏幕(该死的设计师)。让我们叫他A。
在这个A div后面,有一个叫做B的大容器。
在B中,有4个div应该响应mouseovermouseout事件,我们可以称它们为C1、C2、C3和C4。
不幸的是,大的A div阻塞了我所有的Javascript/jQuery事件。
这可以通过一些变通办法解决,但问题是:

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

我试着处理(使用和不使用jQuery)来自A的事件并将其触发到B。它工作了,但B没有将其转发到它的C子节点,而且再一次,我不知道它们的进展。

1yjd4xko

1yjd4xko1#

下面是你要做的。大多数浏览器都支持css pointer events
在这些浏览器上用途:

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

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

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

vwkv1x7d2#

OR内部标记:style="pointer-events: none;"

djmepvbi

djmepvbi3#

由于您有div1,它包含一些HTML内容,应该听点击和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();
                }
            }
        });

相关问题