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

Question

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

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

我们无法再次选择内部图像,因为z-index选择div(带有蓝点的那个)是(必须是)最高的(我们必须将它用于所有组件的最高bcoz).所以如果我尝试现在选择内部图像无法选择.我该如何处理这种情况？作为参考,它可以按预期在此站点上运行.
我相信在点击它时我们已经获得了父元素下的元素.但是不确定如何!我们使用javascript,jquery来处理事件.

Answer 1

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

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

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