移动设备、手机浏览器Javascript滑动事件代码

淩亂°似流年 2021-09-10 09:44 284阅读 0赞

以下经过本人测试成功。

测试平台：三星S5830I

操作系统：Android 2.3.6

浏览器：UC浏览器

HTML标准：HTML5

测试了三个事件：touchstart、touchmove 和 touchend，并获取了触摸时触点在页面上的坐标，根据坐标进行了左右滑动、上下滑动判断。

代码如下：

**\[html\]**  [view plain][] [copy][view plain]

1.    
2.  <!DOCTYPE html**>**  
3.  **<****html****>**  
4.      **<****head****>**  
5.          **<****title****>**TouchEvent测试**</****title****>**  
6.          **<****meta** charset="gbk"**>**  
7.      **</****head****>**  
8.      **<****body****>**  
9.          **<****h2****>**TouchEvent测试**</****h2****>**  
10.         **<****br** **/>**  
11.         **<****div** id="version" style="border:2px solid black;background-color:yellow"**>****</****div****>**  
12.         **<****br** **/>**  
13.         **<****br** **/>**  
14.         **<****br** **/>**  
15.         **<****br** **/>**  
16.         **<****br** **/>**  
17.         **<****br** **/>**  
18.         **<****div** id="result" style="border:2px solid red; color:red;"**>**未触发事件！**</****div****>**  
19.         **<****div** id="test" style="border:2px solid red"**>**  
20.             **<****ul****>**  
21.                 **<****li** id="li1"**>**测试条目1**</****li****>**  
22.                 **<****li** id="li2"**>**测试条目2**</****li****>**  
23.                 **<****li** id="li3"**>**测试条目3**</****li****>**  
24.                 **<****li** id="li4"**>**测试条目4**</****li****>**  
25.                 **<****li** id="li5"**>**测试条目5**</****li****>**  
26.                 **<****li** id="li6"**>**测试条目6**</****li****>**  
27.                 **<****li** id="li7"**>**测试条目7**</****li****>**  
28.                 **<****li** id="li8"**>**测试条目8**</****li****>**  
29.                 **<****li** id="li9"**>**测试条目9**</****li****>**  
30.                 **<****li** id="li10"**>**测试条目10**</****li****>**  
31.                 **<****li** id="li11"**>**测试条目11**</****li****>**  
32.                 **<****li** id="li12"**>**测试条目12**</****li****>**  
33.                 **<****li** id="li13"**>**测试条目13**</****li****>**  
34.                 **<****li** id="li14"**>**测试条目14**</****li****>**  
35.                 **<****li** id="li15"**>**测试条目15**</****li****>**  
36.                 **<****li** id="li16"**>**测试条目16**</****li****>**  
37.                 **<****li** id="li17"**>**测试条目17**</****li****>**  
38.                 **<****li** id="li18"**>**测试条目18**</****li****>**  
39.                 **<****li** id="li19"**>**测试条目19**</****li****>**  
40.                 **<****li** id="li20"**>**测试条目20**</****li****>**  
41.             **</****ul****>**  
42.         **</****div****>**  
43.           
44.         **<****script** type="text/javascript"**>**  
45.             //全局变量，触摸开始位置  
46.             var startX = 0, startY = 0;  
47.               
48.             //touchstart事件  
49.             function touchSatrtFunc(evt) \{  
50.                 try  
51.                 \{  
52.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
53.   
54.                     var touch = evt.touches\[0\]; //获取第一个触点  
55.                     var x = Number(touch.pageX); //页面触点X坐标  
56.                     var y = Number(touch.pageY); //页面触点Y坐标  
57.                     //记录触点初始位置  
58.                     startX = x;  
59.                     startY = y;  
60.   
61.                     var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';  
62.                     document.getElementById("result").innerHTML = text;  
63.                 \}  
64.                 catch (e) \{  
65.                     alert('touchSatrtFunc：' + e.message);  
66.                 \}  
67.             \}  
68.   
69.             //touchmove事件，这个事件无法获取坐标  
70.             function touchMoveFunc(evt) \{  
71.                 try  
72.                 \{  
73.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
74.                     var touch = evt.touches\[0\]; //获取第一个触点  
75.                     var x = Number(touch.pageX); //页面触点X坐标  
76.                     var y = Number(touch.pageY); //页面触点Y坐标  
77.   
78.                     var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';  
79.   
80.                     //判断滑动方向  
81.                     if (x - startX != 0) \{  
82.                         text += '**<****br****/>**左右滑动';  
83.                     \}  
84.                     if (y - startY != 0) \{  
85.                         text += '**<****br****/>**上下滑动';  
86.                     \}  
87.   
88.                     document.getElementById("result").innerHTML = text;  
89.                 \}  
90.                 catch (e) \{  
91.                     alert('touchMoveFunc：' + e.message);  
92.                 \}  
93.             \}  
94.   
95.             //touchend事件  
96.             function touchEndFunc(evt) \{  
97.                 try \{  
98.                     //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
99.   
100.                     var text = 'TouchEnd事件触发';  
101.                     document.getElementById("result").innerHTML = text;  
102.                 \}  
103.                 catch (e) \{  
104.                     alert('touchEndFunc：' + e.message);  
105.                 \}  
106.             \}  
107.   
108.             //绑定事件  
109.             function bindEvent() \{  
110.                 document.addEventListener('touchstart', touchSatrtFunc, false);  
111.                 document.addEventListener('touchmove', touchMoveFunc, false);  
112.                 document.addEventListener('touchend', touchEndFunc, false);  
113.             \}  
114.   
115.             //判断是否支持触摸事件  
116.             function isTouchDevice() \{  
117.                 document.getElementById("version").innerHTML = navigator.appVersion;  
118.   
119.                 try \{  
120.                     document.createEvent("TouchEvent");  
121.                     alert("支持TouchEvent事件！");  
122.   
123.                     bindEvent(); //绑定事件  
124.                 \}  
125.                 catch (e) \{  
126.                     alert("不支持TouchEvent事件！" + e.message);  
127.                 \}  
128.             \}  
129.   
130.             window.onload = isTouchDevice;  
131.     **</****script****>**  
132.     **</****body****>**  
133. **</****html****>**

**下面是jQuery Mobile实现上下滑动的方式**：

jQuery Mobile左右滑动事件：swipe（水平滑动30px以上时触发）、swipeLeft（向左滑）、swipeRight（向右滑）

jQuery Mobile垂直滑动事件：**scrollstart（上下滚动）、scrollend（滚动停止）**

jQuery Mobile触摸点击事件：tap（快速触碰）、taphold（触碰并保持750ms以上触发）

**\[html\]**  [view plain][] [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.      **<****head****>**  
4.          **<****title****>**Ajax测试**</****title****>**  
5.          **<****meta** charset="gbk"**>**  
6.          **<****meta** name="viewport" content="width=device-width, initial-scale=1"**>**  
7.          **<****link** rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"**/>**  
8.          **<****link** rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"**/>**  
9.          **<****script** src="jquery-mobile/jquery-1.8.2.min.js"**>****</****script****>**  
10.         **<****script** src="jquery-mobile/jquery.mobile-1.2.0.min.js"**>****</****script****>**  
11.     **</****head****>**  
12.     **<****body****>**  
13.         **<****div** data-role="page" data-theme="b"**>**  
14.         **<****div** data-role="header"**>****</****div****>**  
15.         **<****div** data-role="content"**>**  
16.             **<****script****>**  
17.                 //scrollstart事件  
18.                 function scrollstartFunc(evt) \{  
19.                     try  
20.                     \{  
21.                         var target = $(evt.target);  
22.                         while (target.attr("id") == undefined) \{  
23.                             target = target.parent();  
24.                         \}  
25.                         //获取触点目标id属性值  
26.                         var targetId = target.attr("id");  
27.   
28.                         alert("targetId: " + targetId);  
29.                     \}  
30.                     catch (e) \{  
31.                         alert('myscrollfunc：' + e.message);  
32.                     \}  
33.                 \}  
34.   
35.                 function myinit() \{  
36.                     //绑定上下滑动事件  
37.                     $("\#myul").bind('scrollstart', function () \{ scrollstartFunc(event); \});  
38.                 \}  
39.   
40.                 window.onload = myinit;  
41.             **</****script****>**  
42.   
43.               
44.             **<****ul** id="myul" data-role="listview" data-inset="true"**>**  
45.                 **<****li** data-role="list-divider"**>**信息列表**</****li****>**  
46.                 **<****li** id="li1" data-role="fieldcontain"**>**信息1**</****li****>**  
47.                 **<****li** id="li2" data-role="fieldcontain"**>**信息2**</****li****>**  
48.                 **<****li** id="li3" data-role="fieldcontain"**>**信息3**</****li****>**  
49.                 **<****li** id="li4" data-role="fieldcontain"**>**信息4**</****li****>**  
50.                 **<****li** id="li5" data-role="fieldcontain"**>**信息5**</****li****>**  
51.                 **<****li** id="li6" data-role="fieldcontain"**>**信息6**</****li****>**  
52.                 **<****li** id="li7" data-role="fieldcontain"**>**信息7**</****li****>**  
53.                 **<****li** id="li8" data-role="fieldcontain"**>**信息8**</****li****>**  
54.                 **<****li** id="li9" data-role="fieldcontain"**>**信息9**</****li****>**  
55.                 **<****li** id="li10" data-role="fieldcontain"**>**信息10**</****li****>**  
56.             **</****ul****>**  
57.         **</****div****>**  
58.     **</****body****>**

[view plain]: http://blog.csdn.net/zht666/article/details/8621332#