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

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

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


当前回答

是的,你可以这样做。

使用指针事件:none以及IE11的CSS条件语句(在IE10或更低版本中不起作用),您可以获得一个跨浏览器兼容的解决方案。

使用AlphaImageLoader,您甚至可以在覆盖div中放置透明的.PNG/.GIF,并让单击流到下面的元素。

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11条件:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

这里是一个包含所有代码的基本示例页面。

其他回答

不,你不能点击一个元素。您可以获取单击的坐标,并尝试找出单击元素下面是什么元素,但对于没有document.elementFromPoint的浏览器来说,这真的很乏味。然后,您仍然需要模拟默认的单击操作,这不一定是微不足道的,这取决于您在那里有什么元素。

由于你有一个完全透明的窗口区域,你可能会更好地将其作为外部的独立边界元素来实现,让中心区域没有障碍物,这样你就可以直接点击。

允许用户通过div单击底层元素取决于浏览器。所有现代浏览器,包括Firefox、Chrome、Safari和Opera,都能理解指针事件:没有。

对于IE,这取决于背景。如果背景是透明的,则无需执行任何操作即可进行点击。另一方面,对于像背景这样的东西:白色;不透明度:0;过滤器:Alpha(不透明度=0);,IE需要手动事件转发。

请参阅JSFiddle测试和CanIUse指针事件。

我认为您可以考虑更改标记。如果我没有错,您希望在文档上方放置一个不可见的层,并且您的不可见标记可能位于文档图像之前(这是正确的吗?)。

相反,我建议您将不可见图像放在文档图像之后,但将位置更改为绝对位置。

请注意,您需要一个父元素来具有position:relative,然后您就可以使用这个想法了。否则,绝对层将仅放置在左上角。

绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素,则包含块为html

希望这有帮助。有关CSS定位的更多信息,请参阅此处。

这不是问题的精确答案,但可能有助于找到解决方法。

我有一个图像,我在页面加载时隐藏并在等待AJAX调用时显示,然后再次隐藏。。。

我发现在加载页面时显示我的图像,然后使其消失,并能够在隐藏之前单击图像所在的位置的唯一方法是将图像放入DIV中,使DIV的大小为10x10像素或足够小,以防止其引发问题,然后隐藏包含的DIV。这允许图像在可见时溢出DIV,当DIV隐藏时,只有divs区域受到无法单击下方对象的影响,而不是DIV包含和显示的图像的整个大小。

我尝试了所有隐藏图像的方法,包括CSS display=none/block,opacity=0,hidden=true隐藏图像。所有这些都导致我的图像被隐藏,但显示的区域就像下面的东西上有一个盖子,所以点击等不会对底层对象起作用。一旦图像位于一个小DIV内,我隐藏了这个小DIV,图像所占的整个区域都是清晰的,只有我隐藏的DIV下的小区域受到影响,但当我将其缩小到足够小(10x10像素)时,问题得到了解决(某种程度上)。

我发现这是一个肮脏的解决方法,它应该是一个简单的问题,但我无法找到任何方法在没有容器的情况下以其原生格式隐藏对象。我的目标是等。如果有人有更好的方法,请告诉我。

更简单的方法是使用数据URI内联透明背景图像,如下所示:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}