selecting an element on mouse click overlapped by another transparent div

Question

I am working on a dashboard where user can drag and drop elements to create html pages.Now,he can have multiple images using an image component.We have managed to calculate the z-index of the images and they can be adjusted using up-down keys.

Issue:
The issue we are facing is when we select a image component we attach a dotted layer above it for helping the user to easily drag and resize it.If the user places the images as shown in the image below overlapping elements

we are not able to select the inner image again because the z-index of the selection div(the one with the blue dots) is(has to be) the highest(highest bcoz we have to use it for all components).So if I try to select the inner image now it cannot be selected.How can I handle the situation? For reference it works on this site as expected.
I believe we have get the element under the parent when it is clicked.But not sure how!We are using javascript,jquery to handle the events.

enter image description here

In imcreator, the overlapping div is not one full div, but four separate ones for the four sides and eight separate ones for the eight sizers. — techfoobar, Jan 31 '13 at 09:39
but they all are inside a main `div` right? we have a somewhat similar structure. — coderunner, Jan 31 '13 at 09:45
Firstly, i din notice at first but as you said they *are* inside a parent div which covers the article/image being worked on. — techfoobar, Jan 31 '13 at 12:40
To get it working, there are a couple of options imo. a) Do it like imcreator, but without the parent div for the sizers and the sidelines (so that the parent div does not block the events from reaching where you want them) b) Process the parent div events and pass them to the element you geet from `elementFromPoint(x, y)` — techfoobar, Jan 31 '13 at 12:45
@techfoobar Well...did not get you exactly!! Can you elaborate a bit pls? — coderunner, Jan 31 '13 at 13:14
Maybe this will help you get started: http://jsfiddle.net/QX97E/ - Its an example of passing the events. — techfoobar, Jan 31 '13 at 13:54
@techfoobar Can't we implement it the same way how they have??Is the logic so different or difficult to get?The reason I say this is it functions seamlessly and without any problem.Will definitely try your solution! — coderunner, Jan 31 '13 at 14:34
What they've done should be an extended version of what I showed you in the fiddle. — techfoobar, Jan 31 '13 at 14:39

score 1 · Accepted Answer · answered Feb 01 '13 at 02:55

1

You can use JavaScript or jQuery to get the position of the inner image, and when the user clicks on the outer image, check to see whether the mouse position lies within the range of the smaller image. The range can be calculated with the position, width, and height of the inner element.

To get the element's position: use jQuery .offset() or .position() (The former is relative to the document, the latter to the parent).

To get the mouse position: http://docs.jquery.com/Tutorials:Mouse_Position

answered Feb 01 '13 at 02:55

Alfred Xing

4,406
2
23
34

Will try it out and let you know if I face any issue!!If not will accept the answer! :) – coderunner Feb 01 '13 at 04:39
I thought over your solution,but there might be a situation where there can be 3 or more overlapping elements(may not be images always),then how could we get the innermost element?One solution I thought was to attach it to the element with the highest z-index!!Added an image to make the doubt clear!Thank you – coderunner Feb 01 '13 at 05:14
To get a certain element within the stack you can compare their z-indexes and see which one is bigger/smaller. – Alfred Xing Feb 03 '13 at 22:15

score 0 · Answer 2 · edited May 23 '17 at 11:56

You could consider hiding the masking element quickly in order to gather the coordinate for your underlying element, when done, you could re enable visibility for the masking element. Use document.elementFromPoint() in order to get the DOM item from mouse coordinate.

An example:

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

Alternatively you can use The CSS property pointer-events: none; on the masking element.

How to detecting a click under an overlapping element?

selecting an element on mouse click overlapped by another transparent div

2 Answers2