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 {
        /*  500px;
        height: 500px; */
      }

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

      #level1-1 {
        background: green;
         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>

相关阅读:
【原创】大数据基础之调度框架
使用mysql索引的规则
mysql分区（partition）
mysql-主从复制（二）
yum 一些命令
centos 升级php、mysql（webtatic）
Linux 查找文件方法
mysql-备份和还原（普通还原和binlog还原）
mysql-主从复制（一）
GSAP JS基础教程--动画的控制及事件

原文地址：https://www.cnblogs.com/dming4/p/16291268.html

touch事件与click事件 码农

touch事件与click事件码农