ProfessinalJavaScriptDemos/Ch13/TouchEventsExample01.htm at master · wangminli/ProfessinalJavaScriptDemos · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <title>Touch Events Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
    <p>Touch anywhere on the screen. This only works on an iPhone or iPod Touch running iPhone 2.x software.</p>
    <div id="output">
    </div>
    <script type="text/javascript">
        function handleTouchEvent(event){

            //only for one touch
            if (event.touches.length == 1){

                var output = document.getElementById("output");
                switch(event.type){
                    case "touchstart":
                        output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                        break;
                    case "touchend":
                        output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                        break;
                    case "touchmove":
                        event.preventDefault();  //prevent scrolling
                        output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                        break;
                }
            }
        }

        document.addEventListener("touchstart", handleTouchEvent, false);
        document.addEventListener("touchend", handleTouchEvent, false);
        document.addEventListener("touchmove", handleTouchEvent, false);

    </script>
</body>
</html>