touch事件与click事件

touchStart

touchMove

touchEnd

 


1. 如果点击屏幕，会触发touchStart
,touchEnd,click事件
2. 如果点击屏幕并且有划动,会触发touchStart
,touchMove,touchEnd事件
3. touchmove和click是相斥
4. 在移动端点击两下屏幕, 会有缩放，点了第一下需要等待第二下, 所以click事件会有延迟300毫秒
5. 如果第一层touchstart事件隐藏了, 第二层如果有click事件，就会发生点透现象，e.preventDefault可以阻止浏览器默认行为, 在touchStart函数中可以使用e.preventDefault阻止click事件

6. 在头部增加禁用缩放, 经测试click事件延迟100毫秒左右，<meta name="viewport" content="user-scalable=no">

 

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #level0 {
        /* width: 500px;
        height: 500px; */
      }

      #level1-0 {
        background: red;
        width: 500px;
        height: 500px;
      }

      #level1-1 {
        background: green;
        width: 500px;
        height: 500px;
      }
    </style>
    <meta name="viewport" content="user-scalable=no">

  </head>
  
  <body>
    <div id="level0">
      <div id="level1-0">
      </div>
      <div id="level1-1">
      </div> 
    </div>
  </body>
  <script type="text/javascript">

    var level10 = document.getElementById("level1-0");

    level10.addEventListener('touchstart', function(e) {
        // e.preventDefault();
      console.log('touchstart',new Date().getSeconds(),new Date().getMilliseconds());
    });

    level10.addEventListener('touchmove', function(e) {
      console.log('touchmove',new Date().getSeconds(),new Date().getMilliseconds());
    });

    level10.addEventListener('touchend', function(e) {
      console.log('touchend',new Date().getSeconds(),new Date().getMilliseconds());
    });

    level10.onclick = function() {
      console.log('level10.onclick',new Date().getSeconds(),new Date().getMilliseconds());
    }

    document.body.onclick = function() {
      console.log('document.body.onclick',new Date().getSeconds(),new Date().getMilliseconds());
    }

    var level11 = document.getElementById("level1-1");


// level10.addEventListener('touchstart', function(e) {
//   level10.style.display = 'none';
// });

// level11.onclick = function() {
//   console.log('level11莫名被点击了');
// }

  </script>
</html>

　　

posted on 2022-05-20 09:53  码农-编程小子  阅读(750)  评论(0)    收藏  举报