关于html：javascript检测手指在div上的移动

javascript detect finger moved over a div

我已经浏览了建议的主题，但似乎之前尚未发布。最接近的一个是它，但是它需要知道坐标：在触摸电话上使用Javascript检测手指拖动？

假设我有3对对：

1
2
3

A
B
C

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

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

如果用户将手指放在B上，然后拖动到A，然后拖动到C而没有抬起，我想输出：BABC。

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

感谢您的指导。

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

这有点棘手，因为您没有touchover事件或类似事件。

因此解决方案是通过元素" coords"检测"触摸"。

用div包裹它们(例如)，并听他touchmove事件。

存放孩子们的"协调"(表演)。

在package上touchmove时，从事件中获取x,y值。

检查谁在这些值中来自孩子。

现在，输入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

// first - store the coords of all the cells for the position check
var matrix = $('.wrapper div').map(function() {
var e = $(this),
o = e.offset(),
w = e.width(),
h = e.height();

return {
top: o.top,
left: o.left,
right: o.left + w,
bottom: o.top + h,
e: e
}
}).get();

var currentTarget = $(),
activeTarget = $();

var touchF = function(e) {
var touch = e.originalEvent.touches[0];
currentTarget = getCurrent(
{
clientX: touch.clientX,
clientY: touch.clientY
}
);

// if the touch is in one of the cells and it's disfferent than the last touch cell
if (currentTarget && currentTarget != activeTarget) {
activeTarget = currentTarget;
console.log(currentTarget.html());
$('#output').append(currentTarget.html() + ' ');
}
}

$('.wrapper').bind({
touchstart: touchF,
touchmove: touchF
});

function getCurrent(touch) {
// check if the touch coords are in the position of one of the cells and which one
var a = matrix.filter(function(obj) {
var b = (
touch.clientX > obj.left &&
touch.clientX < obj.right &&
touch.clientY < obj.bottom &&
touch.clientY > obj.top
);

return b;
});

return a.length > 0 ? a[0].e : null;
}

1
2
3
4
5
6
7
8
9
10
11

.wrapper:after {
content:"";
display:table;
clear:both;
}

.wrapper div {
width:50px;
height:50px;
border:1px solid;
}

1
2
3
4
5
6
7

http://jsbin.com/kokoxuwebi/edit?html,css,js