移动端的touch事件(touchstart、touchmove)以及如何取得滑过元素的id

最新推荐文章于 2025-09-11 12:39:33 发布

原创最新推荐文章于 2025-09-11 12:39:33 发布 · 5.2k 阅读

0 ·

CC 4.0 BY-SA版权

Web前端开发专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何在移动端利用jQuery处理touchstart和touchmove事件，包括如何使用e.currentTarget、e.delegateTarget和e.target获取触控目标元素。此外，还介绍了在多点触控情况下，如何通过计算触点位置并使用document.elementFromPoint方法将触点转化为具体元素，以及如何在Zepto库下实现相同功能。

$('.jump-tag').bind("touchstart touchmove", function (e) {

});

$('.jump-tag').bind("touchend", function (e) {
$("#showLetter").hide(0);
});

对于touchstart事件来说：
e.currentTarget 获取当前划过的元素。可以直接使用，比如$(e.currentTarget).val()以及$(e.currentTarget).text();
e.delegateTarget 获取当前划过的元素。
e.target 触目的DOM节点目标

对于touchmove事件：
同样可以用e.target 触目的DOM节点目标；
除了以上直接获取以外，如果多点触控还可以通过以下方法：

在jQuery下通过使用e.originalEvent.targetTouches[0] 或者targetTouches[0]来获取当前第一个触点；
然后通过计算触点位置再进行元素转化，就可以获得元素了：
var top = $(window).scrollTop();
var ele = document.elementFromPoint(touch.pageX, touch.pageY - top);
最后就可以使用元素了：
$(ele).text()或者$(ele).val();

或者在使用Zepto库下通过使用或者e.touches[0]来获取当前第一个触点；

然后通过计算触点位置再进行元素转化，就可以获得元素了：
var top = $(window).scrollTop();
var ele = document.elementFromPoint(touch.pageX, touch.pageY - top);
最后就可以使用元素了：
$(ele).text()或者$(ele).val();