js代码

$(function() {

    function judge() {

        var startx;//让startx在touch事件函数里是全局性变量。

        var endx;

        var el = document.getElementById('io');//触摸区域。

        function cons() {   //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。

            if (startx > endx) {  //判断左右移动程序

                alert("left");

            } else {

                alert("right");

            }

        }  

        el.addEventListener('touchstart', function (e) {

            var touch = e.changedTouches;

            startx = touch[].clientX;

            starty = touch[].clientY;

        });

        el.addEventListener('touchend', function (e) {

            var touch = e.changedTouches;

            endx = touch[].clientX;

            endy = touch[].clientY;

            cons();  //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。

        });

    }  

    judge();

})

html随便写就可以  记得id要对应

<body>

    <div style="width: 100%;height: 3000px;background: #08c;" id="io">  

    </div>

</body>

　　

js判断手机的左右滑动的更多相关文章

  1. js判断手机 横屏模式

    js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...

  2. js判断手机浏览器操作系统和微信浏览器的方法

    做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...

  3. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  4. js判断手机浏览器是横屏or竖屏

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...

  5. js判断手机系统和微信

    //判断手机浏览器 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipa ...

  6. js判断手机是否安装了某一款app，有则打开，没有去下载

    function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...

  7. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  8. 【转】js判断手机访问网页

    原理:原理有两个,第一:通过游览器(browser)判断是否是手机:第二:通过访问终端判断是否是手机(userAgent):但是通常考虑到兼容性,需要这两种原理同时使用:具体的实现如下: JS实现: ...

  9. JS判断手机访问跳转到手机站

    这里提供了六种让手机端访问网站跳转到手机端的方法: 第一种: <script> if(navigator.platform.indexOf('Win32')!=-1){ //pc //wi ...

随机推荐

  1. maven引入dubbo包后启动报错

    启动后报错内容为: Caused by: org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exce ...

  2. 在基于vue-cli的项目自定义打包环境

    在工作当中,遇到了下面这个问题: 测试环境与生产环境中的用户权限不一样,因此,就需要根据测试环境打一个包,生产环境又打一个包.可是,如果每次打包都需要更改权限的配置文件的话,会很麻烦,而且,体现不出一 ...

  3. Python读取内容UnicodeDecodeError错误

    1.错误现象 环境:Python3.7 描述: 用open方法获取文件句柄: 用read/readlines方法一次读取文件所有内容: 尝试了编码GB2312/GBK/GB18030/UTF-8,发现 ...

  4. UVA 1594 Ducci Sequence（紫书习题5-2 简单模拟题）

    A Ducci sequence is a sequence of n-tuples of integers. Given an n-tuple of integers (a1, a2, · · · ...

  5. Linux命令之---nl

    命令简介 nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补 ...

  6. vs code 快捷键总结

    返回上个光标:alt + ←列编辑模式:shift + alt + 鼠标左键

  7. 分治 - 计算几何 - BZOJ2458,[BeiJing2011]最小三角形

    http://www.lydsy.com/JudgeOnline/problem.php?id=2458 [BeiJing2011]最小三角形 描述 Frisk现在遇到了一个有趣的问题. 平面上有N个 ...

  8. python - 接口自动化测试 - TestRegister - 注册接口测试用例

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: test_register.py @ide: PyChar ...

  9. Python 拓展之特殊函数（lambda 函数，map 函数，filter 函数，reduce 函数）

    写在之前 今天给大家介绍几个比较特殊的函数,他们具有函数式编程的特点,有人将它们视为 Python 可进行 "函数式编程" 的见证,至于什么是函数式编程,不是本篇文章的重点,感兴趣 ...

  10. java 二叉树递归遍历算法

    //递归中序遍历 public void inorder() { System.out.print("binaryTree递归中序遍历:"); inorderTraverseRec ...