OLD | NEW |
1 <sky> | 1 <sky> |
2 <import src="fps-counter.sky" /> | 2 <import src="fps-counter.sky" /> |
3 <style> | 3 <style> |
4 dot { | 4 dot { |
5 position: absolute; | 5 position: absolute; |
6 height: 100px; | 6 height: 100px; |
7 width: 100px; | 7 width: 100px; |
8 background-color: #00FF00; | 8 background-color: #00FF00; |
9 } | 9 } |
10 </style> | 10 </style> |
11 <dot /> | 11 <dot /> |
12 <log>Ready</log> | 12 <log>Ready</log> |
13 <fps-counter /> | 13 <fps-counter /> |
14 <script> | 14 <script> |
15 var dot = document.querySelector("dot"); | 15 var dot = document.querySelector("dot"); |
16 var log = document.querySelector("log"); | 16 var log = document.querySelector("log"); |
17 | 17 |
18 function logTouchEvent(evt) { | 18 function logPointerEvent(evt) { |
19 var message = "type=" + event.type; | 19 var message = "type=" + event.type; |
20 if (evt.touches && evt.touches.length > 0) { | 20 var x = evt.x.toFixed(2); |
21 var x = evt.touches[0].clientX.toFixed(2); | 21 var y = evt.y.toFixed(2); |
22 var y = evt.touches[0].clientY.toFixed(2); | 22 message += " x=" + x + " y=" + y; |
23 message += " x=" + x + " y=" + y; | |
24 | 23 |
25 var transform = "translate(" + (x - 50) + "px," + (y - 50) + "px)"; | 24 var transform = "translate(" + (x - 50) + "px," + (y - 50) + "px)"; |
26 dot.style.transform = transform; | 25 dot.style.transform = transform; |
27 } | |
28 log.textContent = message; | 26 log.textContent = message; |
29 } | 27 } |
30 | 28 |
31 document.documentElement.addEventListener("touchstart", logTouchEvent); | 29 document.documentElement.addEventListener("pointerdown", logPointerEvent); |
32 document.documentElement.addEventListener("touchmove", logTouchEvent); | 30 document.documentElement.addEventListener("pointermove", logPointerEvent); |
33 document.documentElement.addEventListener("touchend", logTouchEvent); | 31 document.documentElement.addEventListener("pointerup", logPointerEvent); |
34 document.documentElement.addEventListener("touchcancel", logTouchEvent); | 32 document.documentElement.addEventListener("pointercancel", logPointerEvent); |
35 </script> | 33 </script> |
36 </sky> | 34 </sky> |
OLD | NEW |