移动端的点击事件

最新推荐文章于 2025-03-17 22:08:01 发布

yjx_43750162

最新推荐文章于 2025-03-17 22:08:01 发布

阅读量537

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43750162/article/details/99865209

版权

本文探讨了移动端的点击事件，包括touchstart、mouseDown、mouseUp和mouseClick。介绍了移动端时间延迟问题，特别是单击操作的特点，如手指数量限制、时间间隔要求以及防止滑动的操作限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端的时间延迟

触屏开始：touchstart
鼠标按下：mouseDown
鼠标抬起：mouseUp
鼠标点击：mouseClick

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   body{
    margin: 0;
    padding: 0;
    text-align: center;
   }
   .result{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    margin: 100px auto;
    border: 1px solid #ccc;
   }
  </style>
 </head>
 <body>
  <div class="result">
   点我试试
  </div>
  <script type="text/javascript">
   var startTime; //用来记录开始点击的时间
   // 封装一个函数    打印信息函数
   var funLog=function(msg){
    // 创建div  用来显示 信息
    var div=document.createElement('div');
    // 计算触发的时间
    // new Date().getTime() : 获取当前时间
    div.innerHTML=(new Date().getTime())+":"+(new Date().getTime()-startTime)+':'+msg;
    // 添加到页面
    document.documentElement.appendChild(div);
   }
   // 触屏开始
   var touchStart=function(){
    startTime=new Date().getTime();
    funLog('touchStart');
   }
   // 鼠标按下
   var mouseDown=function(){
    funLog('mouseDown');
   }
   // 鼠标点击
   var mouseClick=function(){
    funLog('mouseClick');
   }
   // 鼠标抬起
   var mouseUp=function(){
    funLog('mouseUp');
   }   
   var touchEnd=function(){
    funLog('touchEnd');
   }
   // 添加事件
   var result=document.querySelector('.result');
   result.addEventListener('mousedown',mouseDown);
   result.addEventListener('click',mouseClick);
   result.addEventListener('mouseup',mouseUp);
   result.addEventListener('touchstart',touchStart);
   result.addEventListener('touchend',touchEnd);
  </script>
 </body>
</html>

移动端的点击事件

单击操作的特点
1,单击只有一根手指
2,判断手指开始触摸和手指松开的事件差异不能大于指定的值 300/150
3,保证没有滑动操作,如果有抖动必须保证抖动的距离在指定的范围内

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <style type="text/css">
   .result{
    width: 200px;
    height: 200px;
    background: deepskyblue;
   }
  </style>
 </head>
 <body>
  <div class="result"></div>
  <script type="text/javascript">
     var div=document.querySelector('div');
   var startTime,startX,startY;
   div.addEventListener('touchstart',function(event){
    if(event.targetTouches.length>1){// 说明不止一根手指操作
     return;
    }
    // 记录手指开始触摸的时间
    startTime=Date.now();
    console.log(startTime);
    
    // 记录当前手指的坐标
    startX=event.targetTouches[0].clientX;
    startY=event.targetTouches[0].clientY;
       })
   
   // touchEnd; 当手指松开时候触发,意味着当前元素上已经没有手指对象了
   div.addEventListener('touchend',function(event){
    if(event.changedTouches.length>1){// 说明不止一根手指操作
     return;
    }
    // 判断时间差异  150ms
    if(Date.now()-startTime>150){
     return;
    }
    var endX=event.changedTouches[0].clientX;
    var endY=event.changedTouches[0].clientY;
    // 这里 暂且 将距离 差异定位6   判断手指移动的距离在6范围之内
    if(Math.abs(endX-startX)<6 && Math.abs(endY-startY)<6){
     console.log('这就是移动端的单击事件--tap事件');
    }   
   })
  </script>
 </body>
</html>