移动端touch使用

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <style>
  div{
  width: 200px;
  height: 200px;
  background-color: red;
  }
  </style>
  </head>
  <body>
  <!-- 移动端有特殊的触摸事件只有移动端有 必须要使用模拟器调试才能触发 -->
  <div></div>
  <script>
  // 1. 有3个touch事件
  // 1. touchstart
  // 2. touchmove
  // 3. touchend
  // 和鼠标的mousemove mouseleave mouseover 有点相似
  var div = document.querySelector('div');
  //手指触摸开始的时候触发的事件
  div.addEventListener('touchstart', function () {
  console.log('touchstart');
  });
  //手指在屏幕上移动的时候触发的事件
  div.addEventListener('touchmove', function () {
  console.log('touchmove');
  });
  //手指触摸结束 的时候触发的事件
  div.addEventListener('touchend', function () {
  console.log('touchend');
  });
   
  </script>
  </body>
 
  • </html>
posted @ 2018-07-24 17:10  昆仑小道士  阅读(83)  评论(0)    收藏  举报