本文介绍了如何使用JQuery和原生JavaScript来处理触摸事件，包括touchstart、touchmove和touchend，并展示了如何获取触摸点的位置。
JQuery写法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$('#id').on('touchstart',function(e)
{ var _touch
= e.originalEvent.targetTouches[0]; var _x=
_touch.pageX;});$('#id').on('touchmove',function(e)
{ var _touch
= e.originalEvent.targetTouches[0]; var _x=
_touch.pageX;});$('#id').on('touchend',function(e)
{ var _touch
= e.originalEvent.changedTouches[0]; var _x=
_touch.pageX;} |
原生写法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
document.getElementById("id").addEventListener("touchstart",function(e){ var _x=e.touches[0].pageX; var _y=e.touches[0].pageY; console.log("start",_x)})document.getElementById("id").addEventListener("touchmove",function(e){ var _x=e.touches[0].pageX; var _y=e.touches[0].pageY; console.log("move",_x)})document.getElementById("id").addEventListener("touchend",function(e){ var _x=e.changedTouches[0].pageX; var _y=e.changedTouches[0].pageY; console.log("end",_x)}) |
以上两种办法中 touchend 需要使用changedTouches[0]
一般我们取第一个手指的坐标，如果有其他要求可能 需要判断手指数量
|
1
2
3
4
|
if (e.targetTouches.length
== 1){ //...} |
顺带贴出常用的一句
|
1
|
e.preventDefault(); |
扫一扫
9288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
