javascript检测手指在div上移动

我已经浏览了建议的帖子，但似乎以前没有发布过。最接近的是这个，但需要知道坐标：

假设我有3对

对：

<div id='Adiv' style='float: left'>A</div>
<div id='Bdiv' style='float: left'>B</div>
<div id='Cdiv' style='float: left'>C</div>

A
B
C

我想检测用户如何与按钮交互，而不是divs上的onClick事件

例如，如果用户将手指放在a上，然后拖动到B，然后拖动到C，我想输出：ABC

如果用户将一个手指放在B上，然后拖动到a，然后拖动到C而不抬起，我想输出：BABC

基本上，我想检测手指是否在DIV上移动/滑动，然后我想知道。这可能吗

谢谢你的指导

p/s这是用于移动web浏览器的，顺便说一句。

---

最好的情况是，这有点棘手，因为你没有触球事件或类似事件

因此，解决方案是通过元素“坐标”来检测“接触”

用div（例如）包装它们，听他

touchmove

event

存储孩子们的“坐标”（性能）

当包装器上的

touchmove

时，从事件中获取

x，y

值

检查这些值中的子对象是谁

现在，转到代码

//首先-存储所有单元格的坐标以进行位置检查
变量矩阵=$（'.wrapper div'）.map（函数（）{
var e=$（此），
o=e.偏移量（），
w=e.宽度（），
h=e.高度（）；
返回{
top:o.top，
左：o，左，
右：左+右，
底部：o.顶部+h，
e:e
}
}).get（）；
var currentTarget=$（），
activeTarget=$（）；
var touchF=函数（e）{
var touch=e.originalEvent.touch[0]；
currentTarget=getCurrent(
{
clientX:touch.clientX，
clientY:touch.clientY
}
);
//如果触摸在其中一个单元中，并且与最后一个触摸单元没有区别
if（currentTarget&¤tTarget！=activeTarget）{
activeTarget=currentTarget；
log（currentTarget.html（））；
$（'#output'）.append（currentTarget.html（）+''）；
}
} 
$（'.wrapper'）.bind({
touchstart:touchF，
touchmove:touchF
});
功能getCurrent（触摸屏）{
//检查触摸坐标是否位于其中一个单元的位置，以及是哪一个单元
var a=矩阵过滤器（功能（obj）{
变量b=(
touch.clientX>obj.left&&
touch.clientXobj.top
);
返回b；
});
返回a.length>0？a[0]。e:null；
}

.wrapper:after{
内容：“；
显示：表格；
明确：两者皆有；
}
.包装部{
宽度：50px；
高度：50px；
边框：1px实心；
}

A.
B
C

谢谢，ti在桌面浏览器中似乎不起作用？我暂时将console.log改为window.alert（），但没有弹出任何消息？当然没有。您需要为桌面和移动设备运行不同的代码。你知道怎么做吗？哦，好吧，我不知道。但我打算让它在手机上运行，所以不用担心桌面版。谢谢=）我确实在网上推了它，用我的手机浏览器进行了测试，我看不到发生了什么，因为我无法打开手机上的控制台窗口来查看它是否工作。我需要查看响应，是否应该打开一个字段以查看其日志记录？现在似乎什么都没有发生，我想知道我是否做错了。我制作了3个文件，html、css和js。我在js上输入了我的答案，现在你可以在屏幕上看到

控制台

的输出。谢谢你的努力，但是效果不太好，我可以点击A B C div，但是如果我在上面滑动，什么都不会输出。请查看：www.nusantara.com.my/matsMate/swipe.html、www.nusantara.com.my/matsMate/swipe.js、www.nusantara.com.my/matsMate/swipe.css