我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个div,以便单击底层元素。
我有一个具有背景的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,问候!
其他回答
是的,可以强制重叠层通过(忽略)单击事件。此外,你可以让特定的孩子被排除在这种行为之外。。。
可以使用指针事件执行此操作
指针事件影响对点击、轻击、滚动和悬停事件的反应。
在应该忽略/通过您设置的所述事件的层中
pointer-events: none;
需要再次响应鼠标/轻敲事件的无响应层的子级需要:
pointer-events: auto;
如果您使用多个重叠的div层(可能有些父层是透明的),那么第二部分非常有用,您需要能够单击子元素,并且仅单击该子元素。
示例用法:
.父级{指针事件:无;}.儿童{指针事件:自动;}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了,哇</a></div>
这不是问题的精确答案,但可能有助于找到解决方法。
我有一个图像,我在页面加载时隐藏并在等待AJAX调用时显示,然后再次隐藏。。。
我发现在加载页面时显示我的图像,然后使其消失,并能够在隐藏之前单击图像所在的位置的唯一方法是将图像放入DIV中,使DIV的大小为10x10像素或足够小,以防止其引发问题,然后隐藏包含的DIV。这允许图像在可见时溢出DIV,当DIV隐藏时,只有divs区域受到无法单击下方对象的影响,而不是DIV包含和显示的图像的整个大小。
我尝试了所有隐藏图像的方法,包括CSS display=none/block,opacity=0,hidden=true隐藏图像。所有这些都导致我的图像被隐藏,但显示的区域就像下面的东西上有一个盖子,所以点击等不会对底层对象起作用。一旦图像位于一个小DIV内,我隐藏了这个小DIV,图像所占的整个区域都是清晰的,只有我隐藏的DIV下的小区域受到影响,但当我将其缩小到足够小(10x10像素)时,问题得到了解决(某种程度上)。
我发现这是一个肮脏的解决方法,它应该是一个简单的问题,但我无法找到任何方法在没有容器的情况下以其原生格式隐藏对象。我的目标是等。如果有人有更好的方法,请告诉我。
允许用户通过div单击底层元素取决于浏览器。所有现代浏览器,包括Firefox、Chrome、Safari和Opera,都能理解指针事件:没有。
对于IE,这取决于背景。如果背景是透明的,则无需执行任何操作即可进行点击。另一方面,对于像背景这样的东西:白色;不透明度:0;过滤器:Alpha(不透明度=0);,IE需要手动事件转发。
请参阅JSFiddle测试和CanIUse指针事件。
它不是那样工作的。解决方法是根据每个元素所占据的区域手动检查鼠标点击的坐标。
元素所占的面积可由1找到。获取元素相对于页面左上角的位置,以及2。宽度和高度。像jQuery这样的库使得这非常简单,尽管它可以用普通的js实现。在文档对象上添加mousemove的事件处理程序将从页面的顶部和左侧连续更新鼠标位置。确定鼠标是否在任何给定对象上包括检查鼠标位置是否在元素的左、右、上和下边缘之间。
另一个尝试(情境)的想法是:
将所需内容放入div中;将非点击覆盖放在整个页面上,z索引更高,制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置,您希望使用更高的z索引进行单击?
有什么想法吗?