在鼠标单击时选择一个与另一个透明 div 重叠的元素答案

【问题标题】：selecting an element on mouse click overlapped by another transparent div在鼠标单击时选择一个与另一个透明 div 重叠的元素
【发布时间】：2015-04-09 22:26:45
【问题描述】：

我正在开发一个仪表板，用户可以在其中拖放元素来创建 html 页面。现在，他可以使用图像组件拥有多个图像。我们已经设法计算了图像的 z-index 和它们可以使用上下键进行调整。

问题：
我们面临的问题是，当我们选择一个图像组件时，我们在其上方附加了一个虚线层，以帮助用户轻松拖动和调整其大小。如果用户将图像放置在下面的图像中@ 987654322@

我们无法再次选择内部图像，因为选择 div 的z-index（带有蓝点的那个）是（必须）最高（我们拥有的最高 bcoz将它用于所有组件）。因此，如果我现在尝试选择内部图像，则无法选择它。我该如何处理这种情况？作为参考，它可以按预期在this 网站上运行。
我相信当它被点击时我们已经得到了父元素下的元素。但不知道如何！我们正在使用 javascript,jquery 来处理事件。

【问题讨论】：

在imcreator中，重叠的div不是一个完整的div，而是四个边的四个独立的div和八个sizer的八个独立的div。
但它们都在一个主要的div 中，对吗？我们的结构有点相似。
@techfoobar 你能建议如何实现它！？？
首先，我一开始注意到了，但正如你所说，它们在在覆盖正在处理的文章/图像的父 div 中。
为了让它工作，imo有几个选项。 a) 像 imcreator 一样做，但没有用于 sizer 和 sidelines 的父 div（这样父 div 不会阻止事件到达您想要的位置） b）处理父 div 事件并将它们传递给您的元素来自elementFromPoint(x, y)

标签： javascript jquery html image mouseevent

【解决方案1】：

可以使用JavaScript或者jQuery获取内图的位置，当用户点击外图时，查看鼠标位置是否在小图的范围内。范围可以通过内部元素的位置、宽度和高度来计算。

要获取元素的位置：使用jQuery .offset() 或.position()（前者相对于文档，后者相对于父级）。

获取鼠标位置：http://docs.jquery.com/Tutorials:Mouse_Position

【讨论】：

会尝试一下，如果我遇到任何问题，请告诉您！！如果没有，将接受答案！ :)
我考虑过您的解决方案，但可能存在3个或更多重叠元素（可能不总是图像）的情况，那么我们如何获得最里面的元素？我想的一个解决方案是把它附加到z-index最高的元素上！！添加了一张图片来说明问题！谢谢
要获取堆栈中的某个元素，您可以比较它们的 z-index 并查看哪个更大/更小。

【解决方案2】：

您可以考虑快速隐藏遮罩元素以收集底层元素的坐标，完成后，您可以重新启用遮罩元素的可见性。使用document.elementFromPoint() 以从鼠标坐标中获取 DOM 项。

一个例子：

http://jsfiddle.net/s94cnckm/14/

或者，您可以在掩码元素上使用 CSS 属性 pointer-events: none;。