jquery 手機觸摸事件


最近做移動端的項目,涉及觸摸事件很頻繁;我接下來介紹下三個基本的觸摸事件:

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 不用解釋了吧,相信以你們的智慧秒懂;有問題下方留言,共同交流,剛實習的新手一個


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM