Question

Imagine a somehow complex HTML structure, you don’t know exactly the positions of things because some elements move over time, others move with hover, etc etc. Whatever the reasons, you just don’t know their positions/margins/paddings.

My question is this: If I have a single container (#my_element_container), contained within some wrappers of which I don’t have that much info (#complex_wrapper), which holds a random amount of elements (#my_element_container li), I want to be able to attach a touchstart event listener on the container and be able to tell in which element the user clicked.

The styles of this example are as follow:

#complex_wrapper {
    position: absolute;
    width: 600px;
    height: 600px;
    margin-top: 50px;   /* These two change randomly so I can't hardcode a -50! */
    margin-left: 12px;
    background-color: gray;
}
#my_element_container {
    position: absolute;
    top: 95px;
    left: 31px;
}
#my_element_container li{
    position: relative;
    width: 480px;
    height: 90px;
    background-color: red;
    border: 1px black solid;
}

Someone hinted in a previous post that I had to somehow manage to substract the margins and paddings of the container, so I would get a 0 coordinate at the top of the element and I could calculate from that. I understand that logic, but what I’m having trouble finding is a way to make that “substracting value” dynamically, whatever the other margins are.

I made a jsfiddle to show what I am asking, my goal is to be able to, whatever I hardcode into #complex_wrapper, tell which element was clicked: http://jsfiddle.net/342jU/1/

Our project doesn’t and won’t use jquery (not sure of the reasons, I just know we don’t).

Answer 1

You could use .elementFromPoint(x,y), where x,y are obviously the mouse event coordinates (I never used touchstart, but I suppose you can get the coordinates in a similar way).
Something like that: http://jsfiddle.net/Polmonite/Sty7d/ .

It becomes like this:

my_element_container.addEventListener('click', function(e) {
    e.preventDefault();
    var element = document.elementFromPoint(e.clientX,e.clientY);

// do something with element

}, false);