随着触屏手机、平板电脑的普及和占有更多用户和使用时间,触屏的触碰、滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为手指在屏幕上滑动触发的事件,这里制作了一个简单的示例,可以通过这个示例认识touchmove事件。
12
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
//禁用手机默认的触屏滚动行为
document.addEventListener('touchmove', function(event) {
event.preventDefault()
}, false)
//touchstart事件
function touchSatrtFunc(evt) {
try {
//evt.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]//获取第一个触点
var x = Number(touch.pageX)//页面触点X坐标
var y = Number(touch.pageY)//页面触点Y坐标
//记录触点初始位置
startX = x
startY = y
} catch (e) {
alert('touchSatrtFunc:' + e.message)
}
}
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
//evt.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]//获取第一个触点
var x = Number(touch.pageX)//页面触点X坐标