我有一个具有背景的div：透明，以及边框。在这个div下面，我有更多的元素。
目前，当我在覆盖div外部单击时，我可以单击底层元素。但是，当我直接单击覆盖div时，我无法单击底层元素。
我希望能够单击这个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，问候！
其他回答
我加上这个答案是因为我没有看到它的全部内容。我能够使用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。
更简单的方法是使用数据URI内联透明背景图像，如下所示：
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
我目前使用的是画布演讲气球。但是，由于带有指针的气球被包装在一个div中，因此它下面的一些链接不再可单击。在这种情况下，我不能使用extjs。参见我的演讲气球教程需要HTML5的基本示例
因此，我决定从阵列中的气球内部收集所有链接坐标。
var clickarray=[];
function getcoo(thatdiv){
thatdiv.find(".link").each(function(){
var offset=$(this).offset();
clickarray.unshift([(offset.left),
(offset.top),
(offset.left+$(this).width()),
(offset.top+$(this).height()),
($(this).attr('name')),
1]);
});
}
我在每个（新的）气球上调用这个函数。它获取link.class的左/上角和右/下角的坐标-此外，如果有人在该坐标中单击，该怎么做的name属性，我喜欢设置1，这意味着它没有被单击jet。然后将此阵列取消移动到单击阵列。你也可以使用push。
要使用该阵列，请执行以下操作：
$("body").click(function(event){
event.preventDefault();//if it is a a-tag
var x=event.pageX;
var y=event.pageY;
var job="";
for(var i in clickarray){
if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
job=clickarray[i][4];
clickarray[i][5]=0;//set to allready clicked
break;
}
}
if(job.length>0){
// --do some thing with the job --
}
});
此函数用于证明主体单击事件的坐标或是否已单击该事件，并返回name属性。我认为没有必要再深入一点，但你知道这并没有那么复杂。希望在我身边。。。
是的，可以强制重叠层通过（忽略）单击事件。此外，你可以让特定的孩子被排除在这种行为之外。。。
可以使用指针事件执行此操作
指针事件影响对点击、轻击、滚动和悬停事件的反应。
在应该忽略/通过您设置的所述事件的层中
pointer-events: none;
需要再次响应鼠标/轻敲事件的无响应层的子级需要：
pointer-events: auto;
如果您使用多个重叠的div层（可能有些父层是透明的），那么第二部分非常有用，您需要能够单击子元素，并且仅单击该子元素。
示例用法：
.父级{指针事件：无；}.儿童{指针事件：自动；}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了，哇</a></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，问候！
