首页
所有分类
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 相关文章推荐
网上抓的一个特效
May 11 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 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
横向滚动(1) virtualenv(1) 加载异常(1) SVN(1) localStorage(1) 共享文件夹(1) DeOldify(1) 骨架屏(1) scrapy(1) Postman(1)
You might like
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
php生成word并下载代码实例
2019/03/15 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
Javascript实现的常用算法（如冒泡、快速、鸽巢、奇偶等）
2014/04/29 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python+opencv识别图片中的圆形
2020/03/25 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
在python中实现对list求和及求积
2018/11/14 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Python实现自动签到脚本功能
2020/08/20 Python
德国专业木制品经销商：Holz-Direkt24
2019/12/26 全球购物
到底Java是如何传递参数的？是by value或by reference？
2012/07/13 面试题
大学军训感言
2014/01/10 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2015年工会工作总结
2015/03/30 职场文书
2015年营业员工作总结
2015/04/23 职场文书
小兵张嘎观后感
2015/06/03 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python