javascript - 获取 touchstart 事件中的元素位置

Question

想象一个复杂的 HTML 结构，你不知道事物的确切位置，因为有些元素随着时间移动，其他元素随着悬停移动等等。无论什么原因，你只是不知道它们的位置/边距/填充。

我的问题是这样的:如果我有一个容器(#my_element_container)，包含在一些我没有太多信息的包装器(#complex_wrapper)中，其中包含随机数量的元素(#my_element_container li) ，我希望能够在容器上附加一个 touchstart 事件监听器，并能够判断用户单击了哪个元素。

本例的样式如下:

#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;
}

有人在上一篇文章中暗示我必须以某种方式设法减去容器的边距和填充，这样我就会在元素顶部得到一个 0 坐标，然后我可以从中进行计算。我理解这个逻辑，但我无法找到一种动态地实现“减去值”的方法，无论其他边距是什么。

我做了一个jsfiddle来显示我要问的内容，我的目标是能够，无论我硬编码到#complex_wrapper中，都可以知道单击了哪个元素:http://jsfiddle.net/342jU/1/

我们的元素没有也不会使用jquery(不确定原因，我只知道我们不使用)。

Answer 1

您可以使用.elementFromPoint(x,y)，其中x,y显然是鼠标事件坐标(我从未使用过touchstart ，但我想你可以用类似的方式获取坐标)。 类似的东西:http://jsfiddle.net/Polmonite/Sty7d/ .

就变成这样了:

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

// do something with element

}, false);