获取 TouchStart 事件中的元素位置

get element position in a touchstart event

本文关键字：元素 位置 TouchStart 事件 获取      更新时间：2023-09-26

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

您可以使用

.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);
相关文章：