• 移动端事件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>

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

  • 相关阅读:
    怎么认Destsoon标签条件
    PHP将图片转base64格式函数
    修改Discuz!X系列开启防CC攻击,不影响搜索引擎收录
    discuz x3.2简化的搜索框代码
    让Discuz! X3.2 SEO标题里的“-”支持空格
    javascript的常用操作(二)
    Spring MVC中注解的简介
    Spring MVC + Thymeleaf
    Maven建立spring-web项目
    Spring @Autowired使用介绍
  • 原文地址:https://www.cnblogs.com/liu-fei-fei/p/5616407.html
Copyright © 2020-2023  润新知