Webモバイル側タッチスライドイベント
23858 ワード
Webモバイル側タッチイベントの例~~~
注意:1.インライン要素でない場合、styleの属性値を取得する前に値を割り当てる~そうでない場合はNull.
2.亲测andriod手机MX 4内蔵ブラウザは适切に运行されている~~しかし、微信ブラウザはサポートされていない~原因は见つからなかった.
注意:1.インライン要素でない場合、styleの属性値を取得する前に値を割り当てる~そうでない場合はNull.
2.亲测andriod手机MX 4内蔵ブラウザは适切に运行されている~~しかし、微信ブラウザはサポートされていない~原因は见つからなかった.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
5 <title>web </title>
6 <meta name="description" content="web "/>
7 <meta name="viewport" content="user-scalable=no">
8 </head>
9 <body>
10 <div style="position:relative;left:10px;top:10px;height: 100px;width: 200px;background: blue;" id="slider"></div>
11 <script>
12 var slider = {
13 // touch
14 touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
15 slider: document.getElementById('slider'),
16 //
17 events: {
18 slider: this.slider, //this slider
19 handleEvent: function (event) {
20 var self = this; //this events
21 if (event.type == 'touchstart') {
22 self.start(event);
23 } else if (event.type == 'touchmove') {
24 self.move(event);
25 } else if (event.type == 'touchend') {
26 self.end(event);
27 }
28 },
29 //touchstart
30 start: function (event) {
31 event.preventDefault(); //
32 var touch = event.targetTouches[0]; //touches touch， touch
33 startPos = {x: touch.clientX, y: touch.clientY}; // touch
34 sliderX = parseInt(this.slider.style.left); //
35 sliderY = parseInt(this.slider.style.top);
36 this.slider.addEventListener('touchmove', this, false);
37 this.slider.addEventListener('touchend', this, false);
38 },
39 //touchmove
40 move: function (event) {
41 // touch ， move
42 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
43 var touch = event.targetTouches[0];
44 endPos = {x: touch.clientX - startPos.x, y: touch.clientY - startPos.y}; //
45 event.preventDefault(); // ，
46 this.slider.style.left = (sliderX + endPos.x ) + 'px';
47 this.slider.style.top = (sliderY + endPos.y) + 'px';
48
49 },
50 //
51 end: function (event) {
52 //
53 this.slider.removeEventListener('touchmove', this, false);
54 this.slider.removeEventListener('touchend', this, false);
55 }
56 },
57
58 //
59 init: function () {
60 var self = this; //this slider
61 if (!!self.touch) self.slider.addEventListener('touchstart', self.events, false); //addEventListener ， handleEvent
62 }
63 };
64 slider.init();
65 </script>
66 </body>
67 </html>