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);

在touchstart事件中获取元素位置

1 个答案: