手機頁面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

相關標籤/搜索