最近做移動端的項目,涉及觸摸事件很頻繁;我接下來介紹下三個基本的觸摸事件:
touchstart:觸摸開始的時候觸發
touchmove:手指在屏幕上滑動的時候觸發
touchend:觸摸結束的時候觸發
下面是我剛寫的一個小demo,可以復制體驗下,測試的話打開瀏覽器的開發者工具的手機模式,點擊屏幕移動就能體驗到了,滾動鼠標是無效的哦~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ss</title> <style>.sb{width: 100%;height: 200px;background-color: red}</style> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div style="height: 3000px"> <div class="sb" ></div> </div> <script> //touchmove 手指不放發生 $('body').on('touchmove',function(){ $('.sb').css({'display':'none'}) //隱藏div }) //touchend 手指放開發生 $('body').on('touchend',function(){ $('.sb').css({'display':'initial','position':'fixed'}) //顯示,固定div }) </script> </body> </html>
好了,有2個了,touchstart 不用解釋了吧,相信以你們的智慧秒懂;有問題下方留言,共同交流,剛實習的新手一個