我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个div,以便单击底层元素。
我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个div,以便单击底层元素。
当前回答
我需要这样做,并决定走这条路:
$('.overlay').click(function(e){
var left = $(window).scrollLeft();
var top = $(window).scrollTop();
//hide the overlay for now so the document can find the underlying elements
$(this).css('display','none');
//use the current scroll position to deduct from the click position
$(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
//show the overlay again
$(this).css('display','block');
});
其他回答
不,你不能点击一个元素。您可以获取单击的坐标,并尝试找出单击元素下面是什么元素,但对于没有document.elementFromPoint的浏览器来说,这真的很乏味。然后,您仍然需要模拟默认的单击操作,这不一定是微不足道的,这取决于您在那里有什么元素。
由于你有一个完全透明的窗口区域,你可能会更好地将其作为外部的独立边界元素来实现,让中心区域没有障碍物,这样你就可以直接点击。
我加上这个答案是因为我没有看到它的全部内容。我能够使用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。
这不是问题的精确答案,但可能有助于找到解决方法。
我有一个图像,我在页面加载时隐藏并在等待AJAX调用时显示,然后再次隐藏。。。
我发现在加载页面时显示我的图像,然后使其消失,并能够在隐藏之前单击图像所在的位置的唯一方法是将图像放入DIV中,使DIV的大小为10x10像素或足够小,以防止其引发问题,然后隐藏包含的DIV。这允许图像在可见时溢出DIV,当DIV隐藏时,只有divs区域受到无法单击下方对象的影响,而不是DIV包含和显示的图像的整个大小。
我尝试了所有隐藏图像的方法,包括CSS display=none/block,opacity=0,hidden=true隐藏图像。所有这些都导致我的图像被隐藏,但显示的区域就像下面的东西上有一个盖子,所以点击等不会对底层对象起作用。一旦图像位于一个小DIV内,我隐藏了这个小DIV,图像所占的整个区域都是清晰的,只有我隐藏的DIV下的小区域受到影响,但当我将其缩小到足够小(10x10像素)时,问题得到了解决(某种程度上)。
我发现这是一个肮脏的解决方法,它应该是一个简单的问题,但我无法找到任何方法在没有容器的情况下以其原生格式隐藏对象。我的目标是等。如果有人有更好的方法,请告诉我。
另一个尝试(情境)的想法是:
将所需内容放入div中;将非点击覆盖放在整个页面上,z索引更高,制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置,您希望使用更高的z索引进行单击?
有什么想法吗?
您可以放置AP覆盖,如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
把它放在你不想要的地方。总之是有效的。