我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个div,以便单击底层元素。
我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个div,以便单击底层元素。
当前回答
您可以放置AP覆盖,如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></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。
我认为您可以考虑更改标记。如果我没有错,您希望在文档上方放置一个不可见的层,并且您的不可见标记可能位于文档图像之前(这是正确的吗?)。
相反,我建议您将不可见图像放在文档图像之后,但将位置更改为绝对位置。
请注意,您需要一个父元素来具有position:relative,然后您就可以使用这个想法了。否则,绝对层将仅放置在左上角。
绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素,则包含块为html
希望这有帮助。有关CSS定位的更多信息,请参阅此处。
是的,可以强制重叠层通过(忽略)单击事件。此外,你可以让特定的孩子被排除在这种行为之外。。。
可以使用指针事件执行此操作
指针事件影响对点击、轻击、滚动和悬停事件的反应。
在应该忽略/通过您设置的所述事件的层中
pointer-events: none;
需要再次响应鼠标/轻敲事件的无响应层的子级需要:
pointer-events: auto;
如果您使用多个重叠的div层(可能有些父层是透明的),那么第二部分非常有用,您需要能够单击子元素,并且仅单击该子元素。
示例用法:
.父级{指针事件:无;}.儿童{指针事件:自动;}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了,哇</a></div>
我目前使用的是画布演讲气球。但是,由于带有指针的气球被包装在一个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属性。我认为没有必要再深入一点,但你知道这并没有那么复杂。希望在我身边。。。
您可以放置AP覆盖,如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
把它放在你不想要的地方。总之是有效的。