我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个div,以便单击底层元素。
我有一个具有背景的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,问候!