选择鼠标单击上的元素与另一个透明div重叠

Question

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

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

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

Answer 1

您可以使用JavaScript或jQuery获取内部图像的位置，当用户单击外部图像时，检查鼠标位置是否位于较小图像的范围内。可以使用内部元素的位置，宽度和高度来计算范围。

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

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

Answer 2

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

一个例子：

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

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

相关：

https://developer.mozilla.org/de/docs/Web/CSS/pointer-events

How to detecting a click under an overlapping element?