我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。

目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。

我希望能够单击这个div,以便单击底层元素。


当前回答

是的,可以强制重叠层通过(忽略)单击事件。此外,你可以让特定的孩子被排除在这种行为之外。。。

可以使用指针事件执行此操作

指针事件影响对点击、轻击、滚动和悬停事件的反应。


在应该忽略/通过您设置的所述事件的层中

pointer-events: none; 

需要再次响应鼠标/轻敲事件的无响应层的子级需要:

pointer-events: auto; 

如果您使用多个重叠的div层(可能有些父层是透明的),那么第二部分非常有用,您需要能够单击子元素,并且仅单击该子元素。

示例用法:

.父级{指针事件:无;}.儿童{指针事件:自动;}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了,哇</a></div>

其他回答

我加上这个答案是因为我没有看到它的全部内容。我能够使用elementFromPoint完成这一操作。所以基本上:

将单击附加到要单击的div把它藏起来确定指针所在的元素单击元素。

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

在我的例子中,重叠的div是绝对定位的——我不确定这是否会产生差异。这至少适用于IE8/9、Safari Chrome和Firefox。

我认为event.stopPropagation();这里也应提及。将此添加到按钮的单击功能。

防止事件在DOM树中冒泡,防止任何父处理程序收到事件通知。

是的,可以强制重叠层通过(忽略)单击事件。此外,你可以让特定的孩子被排除在这种行为之外。。。

可以使用指针事件执行此操作

指针事件影响对点击、轻击、滚动和悬停事件的反应。


在应该忽略/通过您设置的所述事件的层中

pointer-events: none; 

需要再次响应鼠标/轻敲事件的无响应层的子级需要:

pointer-events: auto; 

如果您使用多个重叠的div层(可能有些父层是透明的),那么第二部分非常有用,您需要能够单击子元素,并且仅单击该子元素。

示例用法:

.父级{指针事件:无;}.儿童{指针事件:自动;}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了,哇</a></div>

您可以放置AP覆盖,如。。。

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}
<div id="overlay"></div>

把它放在你不想要的地方。总之是有效的。

例如,只需在所有HTML摘录周围包装一个标记

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

在我的示例中,我的字幕类具有悬停效果,指针事件为:无;你只会输

包装内容将保持悬停效果,您可以单击所有图片,包括div,问候!