2

想象一个复杂的 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（不确定原因，我只知道我们没有）。

4

1 回答 1

2

您可以使用.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);
于 2013-01-24T09:00:08.033 回答