请看示例:
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.asp