JavaScript
搜索
分类

JavaScript监听触摸事件代码实例

作者：剑圣_LLX 时间：2023-08-20 19:12:54　

这篇文章主要介绍了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

来源：https://www.cnblogs.com/LLX8/p/9212405.html

标签：JavaScript,监听,触摸,事件
0
投稿

猜你喜欢

  • 在ASP中用“正则表达式对象”来校验数据的合法性

    2010-05-27 12:25:00

  • SQL Server中通过reverse取某个最后一次出现的符号后面的内容(字符串反转)

    2012-07-11 15:59:36

  • PHP hebrev()函数用法讲解

    2023-06-03 12:49:32

  • oracle 发送邮件 实现方法

    2009-06-10 17:49:00

  • “验证码”等于“流氓软件”

    2007-10-19 18:29:00

  • 如何处理包含JavaScript语句时的间隔符？

    2009-11-14 20:39:00

  • 用WEB(ASP)方式实现SQL SERVER 数据库的备份和恢复

    2010-05-11 20:12:00

  • php基于协程实现异步的方法分析

    2023-06-11 10:08:39

  • Refactoring HTML 书评

    2008-07-10 12:00:00

  • 教你制作1px边框表格的四种方法

    2008-10-04 10:16:00

  • Oracle关于时间/日期的操作

    2009-02-26 10:37:00

  • 概念性产品设计

    2008-06-11 12:57:00

  • 用PHP编写每周签到功能以提高用户参与度

    2023-05-27 17:24:54

  • ASP.NET技巧：同时对多个文件进行大量写操作对性能优化

    2023-07-08 12:22:37

  • [译]Javascript风格要素（二）

    2008-02-29 12:51:00

  • 如何在浏览器地址栏显示自己的Favicons.ico图标

    2007-10-22 11:45:00

  • 美化段落文本 1

    2008-05-15 12:24:00

  • PHP getNamespaces()函数讲解

    2023-06-11 07:32:45

  • 利用索引提高SQL Server数据处理的效率

    2009-01-08 15:32:00

  • PHP session反序列化漏洞超详细讲解

    2023-05-25 08:54:18
    • asp之家 网络编程 m.aspxhome.com