首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript监听触摸事件代码实例

Posted in Javascript onDecember 30, 2019

这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

监听

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Wsscat滑动事件Demo</title>
  </head>

  <body>
    <article>上下左右滑动</article>
  </body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    article {
      background-color: #000000;
      width: 100%;
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: #FFFFFF;
    }
  </style>
  <script>
    (function() {
      var touch = {};
      function direction(startX, changeX, startY, changeY) {
        return Math.abs(startX - changeX) >=
          Math.abs(startY - changeY) ? (startX - changeX > 0 ? 'Left' : 'Right') : (startY - changeY > 0 ? 'Up' : 'Down')
      }
      document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
        touch.startY = e.targetTouches[0].pageY;
        touch.startX = e.targetTouches[0].pageX;
        //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
      });
      document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
        touch.whenChangY = e.changedTouches[0].pageY;
        touch.whenChangX = e.changedTouches[0].pageX;
        //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
      })
      document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
        touch.changY = e.changedTouches[0].pageY;
        touch.changX = e.changedTouches[0].pageX;
        //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
        var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
        console.log(swDirection);
      })
    })()
  </script>

</html>

触摸

<!--touchstart
在触摸开始时触发事件
touchend
在触摸结束时触发事件
touchmove
在触摸期间时触发事件-->

<!DOCTYPE html>
<html lang="zh-cn" class="no-js">

  <head>
    <meta http-equiv="Content-Type">
    <meta content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" type="text/css" href="css/reset.css" rel="external nofollow" />
  </head>

  <body>
    <div class="page page-1-1 page-current">
      <div class="wrap">
      </div>
    </div>
    <div class="page page-2-1 hide">
      <div class="wrap">
      </div>
    </div>
    <div class="page page-2-2 hide">
      <div class="wrap">
      </div>
    </div>
    <div class="page page-3-1 hide">
      <div class="wrap">
      </div>
    </div>
  </body>
  <script>
    (function() {
      var now = {
          row: 1,
          col: 1
        },
        last = {
          row: 0,
          col: 0
        };
      const towards = {
        up: 1,
        right: 2,
        down: 3,
        left: 4
      };
      var isAnimating = false;
      var touch = {};
      function direction(startX, changeX, startY, changeY) {
        return Math.abs(startX - changeX) >=
          Math.abs(startY - changeY) ? (startX - changeX > 0 ? 'Left' : 'Right') : (startY - changeY > 0 ? 'Up' : 'Down')
      }
      document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
        touch.startY = e.targetTouches[0].pageY;
        touch.startX = e.targetTouches[0].pageX;
        //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
      });
      document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
        touch.whenChangY = e.changedTouches[0].pageY;
        touch.whenChangX = e.changedTouches[0].pageX;
        //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
      })
      document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
        touch.changY = e.changedTouches[0].pageY;
        touch.changX = e.changedTouches[0].pageX;
        //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
        var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
        console.log(swDirection);
        //以回调的方法来写这个动作
        if(swDirection == 'Up') {
          swipeUp(function() {
            if(isAnimating) return;
            last.row = now.row;
            last.col = now.col;
            if(now.col == 2) {
              return;
            } else if(last.row != 6) {
              now.row = last.row + 1;
              now.col = 1;
              pageMove(towards.up);
            }
          })
        }
        if(swDirection == 'Down') {
          if(isAnimating) return;
          last.row = now.row;
          last.col = now.col;
          if(now.col == 2) {
            return;
          } else if(last.row != 1) {
            now.row = last.row - 1;
            now.col = 1;
            pageMove(towards.down);
          }
        }
        if(swDirection == 'Left') {
          if(isAnimating) return;
          last.row = now.row;
          last.col = now.col;
          if(last.row > 1 && last.row < 5 && last.col == 1) {
            now.row = last.row;
            now.col = 2;
            pageMove(towards.left);
          }
        }
        if(swDirection == 'Right') {
          if(isAnimating) return;
          last.row = now.row;
          last.col = now.col;
          if(last.row > 1 && last.row < 5 && last.col == 2) {
            now.row = last.row;
            now.col = 1;
            pageMove(towards.right);
          }
        }
      })
      function swipeUp(callback) {
        callback()
      }
      function hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
      }
      console.log(window.document)
      function addClass(obj, cls) {
        if(!hasClass(obj, cls)) obj.className += " " + cls;
      }
      function removeClass(obj, cls) {
        if(hasClass(obj, cls)) {
          var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
          obj.className = obj.className.replace(reg, ' ');
        }
      }
      function toggleClass(obj, cls) {
        if(hasClass(obj, cls)) {
          removeClass(obj, cls);
        } else {
          addClass(obj, cls);
        }
      }
      function pageMove(tw) {
        console.log(now);
        console.log(now);
        var lastPage = ".page-" + last.row + "-" + last.col,
          nowPage = ".page-" + now.row + "-" + now.col;
        switch(tw) {
          case towards.up:
            outClass = 'pt-page-moveToTop';
            inClass = 'pt-page-moveFromBottom';
            break;
          case towards.right:
            outClass = 'pt-page-moveToRight';
            inClass = 'pt-page-moveFromLeft';
            break;
          case towards.down:
            outClass = 'pt-page-moveToBottom';
            inClass = 'pt-page-moveFromTop';
            break;
          case towards.left:
            outClass = 'pt-page-moveToLeft';
            inClass = 'pt-page-moveFromRight';
            break;
        }
        isAnimating = true;
        var $nowPage = document.querySelector(nowPage);
        var $lastPage = document.querySelector(lastPage);
        console.log($nowPage);
        removeClass($nowPage, "hide");
        addClass($lastPage, outClass)
        addClass($nowPage, inClass);
        setTimeout(function() {
          removeClass($lastPage, 'page-current');
          removeClass($lastPage, outClass);
          addClass($lastPage, "hide");
          addClass($nowPage, 'page-current');
          removeClass($nowPage, inClass);
          isAnimating = false;
        }, 600);
      }
    })()
  </script>
  <style>
    body {
      width: 100%;
      overflow: hidden;
    }
    
    .page {
      width: 100%;
      height: 100%;
      position: absolute;
      font-size: 100px;
      text-align: center;
    }
    
    .page .wrap {
      height: 500px;
    }
    
    .page-1-1 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-2-1 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-2-2 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-3-1 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-3-2 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-4-1 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-4-2 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-5-1 {
      background-image: url(img/background/1.png);
      background-size: cover;
    }
    
    .page-current {
      z-index: 1;
    }
    
    .hide {
      display: none;
    }
    
    .pt-page-moveToTop {
      -webkit-animation: moveToTop .6s ease both;
      animation: moveToTop .6s ease both;
    }
    
    @-webkit-keyframes moveToTop {
      from {}
      to {
        -webkit-transform: translateY(-100%);
      }
    }
    
    .pt-page-moveFromBottom {
      -webkit-animation: moveFromBottom .6s ease both;
      animation: moveFromBottom .6s ease both;
    }
    
    @-webkit-keyframes moveFromBottom {
      from {
        -webkit-transform: translateY(100%);
      }
    }
    
    .pt-page-moveToBottom {
      -webkit-animation: moveToBottom .6s ease both;
      animation: moveToBottom .6s ease both;
    }
    
    @-webkit-keyframes moveToBottom {
      from {}
      to {
        -webkit-transform: translateY(100%);
      }
    }
    
    .pt-page-moveFromTop {
      -webkit-animation: moveFromTop .6s ease both;
      animation: moveFromTop .6s ease both;
    }
    
    @-webkit-keyframes moveFromTop {
      from {
        -webkit-transform: translateY(-100%);
      }
    }
    
    .pt-page-moveToRight {
      -webkit-animation: moveToRight .6s ease both;
      animation: moveToRight .6s ease both;
    }
    
    @-webkit-keyframes moveToRight {
      from {}
      to {
        -webkit-transform: translateX(100%);
      }
    }
    
    .pt-page-moveToLeft {
      -webkit-animation: moveToLeft .6s ease both;
      animation: moveToLeft .6s ease both;
    }
    
    @-webkit-keyframes moveToLeft {
      from {}
      to {
        -webkit-transform: translateX(-100%);
      }
    }
  </style>

</html>

触摸前后

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!--利用touchstart和touchend触摸前后监听到的四个坐标分别是触摸前的x，y坐标和触摸后的x，y坐标，
    然后用数学公式进行运算得出方向-->
  </body>
  <script type="text/javascript">
    document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
        touch.startY = e.targetTouches[0].pageY;
        touch.startX = e.targetTouches[0].pageX;
        //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
      });
    document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
        touch.whenChangY = e.changedTouches[0].pageY;
        touch.whenChangX = e.changedTouches[0].pageX;
        //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
      })
    document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
        touch.changY = e.changedTouches[0].pageY;
        touch.changX = e.changedTouches[0].pageX;
        //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
        var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
  </script>
</html>

GitHub地址：https://github.com/lianglixiong

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript监听触摸事件代码实例

- Author -

剑圣_LLX

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
JSON 学习之完全手册 图文
May 29 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
Mar 14 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 #Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 #Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 #Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 #Javascript
JavaScript switch语句使用方法简介
Dec 30 #Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 #Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 #Javascript
Get(1) Post(1) RabbitMQ(3) plus.io(1) 日志(1) Vmware(3) 目录管理(1) 虚拟机(3) html5+(1) 磁盘管理(1)
You might like
使用php测试硬盘写入速度示例
2014/01/27 PHP
WordPress网站性能优化指南
2015/11/18 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的lstrip()方法使用简介
2015/05/19 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python中str.join()简单用法示例
2018/03/20 Python
python学生管理系统开发
2019/01/30 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
python opencv肤色检测的实现示例
2020/12/21 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
英国最大的高品质珠宝和手表专家：Goldsmiths
2017/03/11 全球购物
捷克体育用品购物网站：D-sport
2017/12/28 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
经典广告词大全
2014/03/14 职场文书
网络信息安全承诺书
2014/03/26 职场文书
寄语是什么意思
2014/04/10 职场文书
户籍证明书标准模板
2014/09/10 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书