Dotýkání displeje mobilu není úplně snadné vychytat. Proto sem odkládám testovací kód, který zvládá ukazovat vzálenost prstů při dvojdoteku, souřadnice a dotek jednoduchý. Tak ať je to pěkně po ruce, až se s tím zase budu muset patlat:
|
1 2 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 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Touch Events Example</title> <style> #touchSurface { width: 100%; height: 300px; background-color: #ddd; display: flex; align-items: center; justify-content: center; user-select: none; touch-action: none; } #output { margin-top: 20px; font-size: 18px; } </style> </head> <body> <div id="touchSurface">Touch Me!</div> <div id="output">Output will be shown here</div> <div id="coordinates">Coordinates will be shown here</div> <script> const touchSurface = document.getElementById('touchSurface'); const output = document.getElementById('output'); const coordinates = document.getElementById('coordinates'); // Get the coordinates div let startPoint = null; touchSurface.addEventListener('touchstart', function(e) { if (e.touches.length === 1) { output.textContent = 'Screen touched'; // Save starting point startPoint = { x: e.touches[0].clientX, y: e.touches[0].clientY }; // Update coordinates for single touch coordinates.textContent = 'Coordinates: (' + startPoint.x.toFixed(2) + ', ' + startPoint.y.toFixed(2) + ')'; } else if (e.touches.length === 2) { // Calculate and display distance between two fingers const distance = getDistance(e.touches[0], e.touches[1]); output.textContent = 'Distance between fingers: ' + distance.toFixed(2); // No need to update coordinates for multi-touch start since it's unclear which point to show } e.preventDefault(); }, false); touchSurface.addEventListener('touchmove', function(e) { if (e.touches.length === 1 && startPoint) { // Calculate distance from the starting point to the current point const currentPoint = { x: e.touches[0].clientX, y: e.touches[0].clientY }; const distanceMoved = getDistance(startPoint, currentPoint); output.textContent = 'Moved distance: ' + distanceMoved.toFixed(2); // Update coordinates for single touch coordinates.textContent = 'Coordinates: (' + currentPoint.x.toFixed(2) + ', ' + currentPoint.y.toFixed(2) + ')'; } else if (e.touches.length === 2) { // Calculate and display distance between two fingers const point1 = { x: e.touches[0].clientX, y: e.touches[0].clientY }; const point2 = { x: e.touches[1].clientX, y: e.touches[1].clientY }; const distance = getDistance(point1, point2); output.textContent = 'Distance between fingers: ' + distance.toFixed(2); // No need to update coordinates for multi-touch move since it's unclear which point to show } e.preventDefault(); }, false); touchSurface.addEventListener('touchend', function(e) { startPoint = null; // Reset starting point output.textContent += ' | Touch ended'; coordinates.textContent = 'Coordinates: (n/a)'; // Reset coordinates display }, false); // Helper function to calculate distance between two points function getDistance(point1, point2) { const dx = point1.x - point2.x; const dy = point1.y - point2.y; return Math.sqrt(dx * dx + dy * dy); } </script> </body> </html> |
Chcete-li zobrazit souřadnice dotykového bodu, musíte přidat listener událostí touchstart a touchmove, který bude aktualizovat samostatný div se souřadnicemi aktuálního dotykového bodu.
Přidejte do HTML div se souřadnicemi ID, ve kterém se budou souřadnice zobrazovat.
Při každém dotyku obrazovky nebo přesunu dotyku zobrazí souřadnice dotykového bodu v DIV coordinates.
V případě vícedotykového ovládání jsem zobrazení souřadnic vynechal, protože když jsou na obrazovce dva prsty, není jasné, souřadnice kterého prstu se mají zobrazit. Pokud potřebujete zobrazit souřadnice i pro multitouch, můžete uvést souřadnice pro každý dotykový bod.