如何在 javascript 中通过点从 DIV 容器中获取元素

Question

我在".container"DIV元素中创建了一个5个DIV数字，如波纹管;

<div class="container">
   <div class="elem1">No 1</div>
   <div class="elem2">No 2</div>
   <div class="elem3">No 3</div>
   <div class="elem4">No 4</div>
   <div class="elem5">No 5</div>
</div>

TouchStart、TouchMove 和 TouchEnd 事件已分配给 .container 元素。

在.elem1容器的触摸启动时，触摸启动事件处理程序在event.target中接收"elem1"。

在".elem4"中容器的触摸端，触摸端事件处理程序在event.target中接收"elem1"，但我在 elem4 中释放触摸。这就是问题所在。我需要在这里获得 elem4。

如何在触摸端事件处理程序上获取确切的元素？通过使用接触点对此有任何解决方案/建议吗？

Answer 1

您是否正在使用 jQuery 来侦听触摸事件？我会做类似的事情：JSFiddle。本质上，我正在侦听触摸类本身上的触摸事件，然后从 ID 中提取特定数据。你可以用任何东西代替 ID，无论是数据属性还是 innerHTML。事件冒泡可能会变得毛茸茸的，这个解决方案过去对我有用。

附言您知道您现在可以在谷歌浏览器中模拟触摸事件吗？查看此页面！

Answer 2

按

以下方式使用 event.pageX 、 event.pageY document.elementFromPoint：

$('.container').bind('touchend', function(ev){
    ev.preventDefault();
    ev.stopPropagation();
    var el = document.elementFromPoint(ev.pageX, ev.pageY);
});

我在这里举了一个例子：

http://jsfiddle.net/MPn3L/

（请注意，我模拟了mouseup事件，但它与触摸设备上的touchend相同）

这是我能想到的最好的解决方案。