手机页面touch触摸事件

时间 2019-11-18

标签手机页面 touch 触摸事件繁體版

原文原文链接

请看示例: javascript

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .main-div{
 8             font-size:4rem;
 9             width:100%;
10         }
11     </style>
12     <script type="text/javascript" src="jquery-2.1.1.js"></script>
13 </head>
14 <body>
15     <div class="main-div">
16         hello wor1ld!
17     </div>
18 </body>
19 </html>
20 
21 <script type="text/javascript">
22      $(".main-div").bind("touchstart", function (e) {   //触摸开始的时候触发
23         //e.preventDefault();  //阻止出现滚动条
24         $(this).css("background-color", "#e5e5e5");
25     }).bind("touchend", function (e) {                  //手指在屏幕上滑动的时候触发
26         $(this).css("background-color", "white");
27     }).bind("touchmove", function (e) {                 //触摸结束的时候触发
28         $(this).css("background-color", "white");
29     });
30 </script>

延伸阅读文章: http://www.w3school.com.cn/jquerymobile/jquerymobile_events_touch.aspcss