touchcancel.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Zepto touch functional test</title>
  6. <meta name="viewport" content="maximum-scale=1,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../test.css">
  8. <script src="../../src/zepto.js"></script>
  9. <script src="../../src/event.js"></script>
  10. <script src="../../src/ie.js"></script>
  11. <script src="../../src/touch.js"></script>
  12. </head>
  13. <body>
  14. <h1>Zepto touch functional test</h1>
  15. <p>
  16. Double-tap and hold until the JavaScript alert occurs. After closing the
  17. alert, tap again. Without touchcancel you will see a double tap instead of a tap.
  18. </p>
  19. <div id="touch_test" style="width: 200px; height: 200px; background: #ddd">
  20. touch events test
  21. </div>
  22. <div id="browser"> </div>
  23. <script>
  24. $('#browser').text(navigator.userAgent)
  25. setTimeout(function(){
  26. alert("Alert! Now tap again, you should see a tap!, not a double tap!")
  27. }, 3000)
  28. $('body').bind('touchmove', function(e){ e.preventDefault() })
  29. $('#touch_test')
  30. .tap(function(){
  31. $(this).append(' | tap!')
  32. })
  33. .doubleTap(function(){
  34. $(this).append(' | double tap!')
  35. })
  36. .swipe(function(){
  37. $(this).append(' | swipe!')
  38. })
  39. .swipeLeft(function(){
  40. $(this).append(' | swipe left!')
  41. })
  42. .swipeRight(function(){
  43. $(this).append(' | swipe right!')
  44. })
  45. .swipeUp(function(){
  46. $(this).append(' | swipe up!')
  47. })
  48. .swipeDown(function(){
  49. $(this).append(' | swipe down!')
  50. })
  51. </script>
  52. </body>
  53. </html>