• 移动端事件touchstart、touchmove、touchend


    关于这三个移动端的事件,详细的资料网上一搜一大片,我就不浪费时间了

    1.移动端长按事件

    var timer = null;
    $(ele).on('touchstart',function(){
        timer = setTimeout(function(){
            alert("我是长按事件!")
        },800);
    });
    $(ele).on('touchend',function(){
        clearTimeout(timer);
    });

    说明:通过定时器模拟长按事件,这个例子基于jQuery,【ele】是要长按的元素;

    2.移动端上下左右滑动事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <title>touch</title>
    </head>
    <body>
    <div id="touchLR">动起来</div>
    <script>
    // 左右滑动事件
    var startX = 0, startY = 0;
    function touchSatrtFunc(evt) {
        try
        {
            evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            var touch = evt.touches[0]; //获取第一个触点
            var x = Number(touch.pageX); //页面触点X坐标
            var y = Number(touch.pageY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;
        }
        catch (e) {
            alert('touchSatrtFunc:' + e.message);
        }
    }
    function touchMoveFunc(evt) {
        try
        {
            evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
            var touch = evt.touches[0]; //获取第一个触点
            var x = Number(touch.pageX); //页面触点X坐标
            var y = Number(touch.pageY); //页面触点Y坐标
    
            var text;
            //判断滑动左右方向
            if (x - startX>=30) {
                text = '向右滑动';
                document.getElementById('touchLR').innerHTML = text;
            }else if(x - startX<=-30){
                text = '向左滑动';
                document.getElementById('touchLR').innerHTML = text;
            }
            //判断滑动上下方向
            if (y - startY>=30) {
                text = '向下滑动';
                document.getElementById('touchLR').innerHTML = text;
            }else if(y - startY<=-30){
                text = '向上滑动';
                document.getElementById('touchLR').innerHTML = text;
            }
        }
        catch (e) {
            alert('touchMoveFunc:' + e.message);
        }
    }
    function bindEvent() {
        document.addEventListener('touchstart', touchSatrtFunc, false);
        document.addEventListener('touchmove', touchMoveFunc, false);
    }
    bindEvent();
    </script>
    </body>
    </html>

    说明:具体原理一搜一堆,这里的具体例子,拷贝就能用;我的学习方式是,不管什么原理之类的,先要做的就是把需求弄出来,在捉摸原理;事半功倍

  • 相关阅读:
    字符串转换的UnicodeDecodeError—— ‘\xa0’问题
    linux下nginx+uwsgi部署python应用
    字符串转换的UnicodeDecodeError—— ‘\xa0’问题
    python的get和post方式请求详解
    MindManager使用说明
    进入程序员的自由天地
    悦读上品 得乎益友
    C++ 是一门难学易用的语言!
    合上More Exceptional C++的瞬间
    从零开始学ASP.NET
  • 原文地址:https://www.cnblogs.com/liu-fei-fei/p/5616407.html
Copyright © 2020-2023  润新知