当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript监听触摸事件代码实例

JavaScript监听触摸事件代码实例

2020年03月09日  | 移动技术网IT编程  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网