touch 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>attr-prop</title>

    <style>
    body{
        height: 3000px;
    }

    #btn{
        touch-action: none;
    }

      .btn2{
          width: 200px;height: 200px;background-color: aqua;
      }

      #box3{
          width: 100px;
          height: 100px;
          background: rebeccapurple;
      }

      #btn{
          width: 150px;
          height: 100px;
      }
    </style>
 
</head>
<body>
 
    <button class="btn1">按钮1</button>
    <div class="btn2">按钮2</div>
    <button class="btn3">按钮3</button>

    <hr>

    <div id="box1"  class="box">按钮1</div>
    <div id="box2"  class="box">按钮2</div>
    <div id="box3"  class="box">按钮3</div>
    <button id="btn" class="btn">button</button>
   

    <script src="../zepto.js"></script>
    <script src="../touch.js"></script>
    <script>
        $(function(){  
            /**
             *   on()
             *   off()
             *   bind()
             *   one()
             *   trigger() 触发 bind 绑定的事件
             *   unbind()
             *
             *    // zepto 独特的事件
             *     tap()  点击事件
             *     singleTap() 单机事件
             *     doubleTap() 双击事件
             *     longTap()  长按事件
             *     滑动事件 swipe   swipeLeft swipeRight  swipeUp  swipeDown
             *
            */
           
            // $('.btn1').on('touchstart',function(){
            //     alert('on触发的事件')
            // })
 
            // // 取消所有的事件
            // $('.btn1').off()

            // // $('.btn2').bind('touchstart',function(){
            // //     alert('bind触发的事件')
            // // })


            // $('.btn2').bind('myTouch',function(){
            //     alert('bind触发的事件')
            // })

            // $('.btn2').unbind()
            // $('.btn2').trigger('myTouch')

            // // 只执行一次
            // $('.btn3').one('touchstart',function(){
            //     alert('只执行一次')
            // })

            // ---------------------------------------

         
            // 点击事件    
            $('#box1').tap(function(){
                alert('tap触发的事件')
            })

            // singleTap() 单机事件
            $('#box2').singleTap(function(){
                alert('单机的事件')
            })
           
            // doubleTap() 双击事件
            $('#box2').doubleTap(function(){
                alert('双击的事件')
            })

            // longTap()  长按事件 当一个元素按住被超过 750ms 触发
            $('#box3').longTap(function(){
                alert('长按的事件')
            })

            // 滑动事件 swipe  swipeLeft swipeRight  swipeUp  swipeDown
            // $('#btn').swipe(function(){
            //     console.log('swipe');
            // })

            $('#btn').swipeLeft(function(){
                console.log('swipeLeft');
            })

            $('#btn').swipeRight(function(){
                console.log('swipeRight');
            })

            $('#btn').swipeUp(function(){
                console.log('swipeUp');
            })
 
            $('#btn').swipeDown(function(){
                console.log('swipeDown');
            })

        })
    </script>

     

</body>
</html>
posted @ 2022-02-17 15:53  13522679763-任国强  阅读(26)  评论(0)    收藏  举报