javascript 基础之手机端相关事件-touch（详细篇）（1）

骑猪看日落 2024-04-20 08:34 13阅读 0赞

计划打乱了，又得重新制定计划，最近学习手机端想关的事件，话不多说，直接开整

##### 最近才知道PC端和移动端各有各的事件，不能混用，所以整理了关于移动端的基础事件，本篇分为两节，介绍两个事件，分别为触摸（touch）事件和手势（gesture）事件 ,本节为第一小节 #####

本节只介绍常用到的，不常用的暂时忽略，在模拟器下不支持用on的方式来给元素加touch事件，推荐用**addEventListener**方式

### touch 事件 ###

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touchstart:</td> 
   <td>手指放到屏幕上时触发</td> 
  </tr> 
  <tr> 
   <td>touchmove:</td> 
   <td>手指在屏幕上滑动式触发</td> 
  </tr> 
  <tr> 
   <td>touchend:</td> 
   <td>手指离开屏幕时触发</td> 
  </tr> 
  <tr> 
   <td>touchcancel:</td> 
   <td>系统取消touch事件的时候触发，这个好像比较少用</td> 
  </tr> 
 </tbody> 
</table>

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

<table> 
 <thead> 
  <tr> 
   <th>触发事件</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touches:</td> 
   <td>当前屏幕上所有手指的列表</td> 
  </tr> 
  <tr> 
   <td>targetTouches:</td> 
   <td>当前dom元素上手指的列表，尽量使用这个代替touches</td> 
  </tr> 
  <tr> 
   <td>changedTouches</td> 
   <td>涉及当前事件的手指的列表，尽量使用这个代替touches</td> 
  </tr> 
 </tbody> 
</table>

它们都是一个数组，每个元素代表一个触摸点。touch对象里包含着触摸信息，主要属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clientX / clientY:</td> 
   <td>触摸点相对浏览器窗口的位置</td> 
  </tr> 
  <tr> 
   <td>pageX / pageY</td> 
   <td>触摸点相对于页面的位置</td> 
  </tr> 
  <tr> 
   <td>screenX / screenY:</td> 
   <td>触摸点相对于屏幕的位置</td> 
  </tr> 
  <tr> 
   <td>identifier:</td> 
   <td>touch对象的ID</td> 
  </tr> 
  <tr> 
   <td>target:</td> 
   <td>当前的DOM元素</td> 
  </tr> 
 </tbody> 
</table>

点击[详细属性解释][Link 1]

clientX/clienYt和pageX/pageY都代表事件发生位置对应对象的偏移量，不过区别是clientX/clientY不包括对象滚动而隐藏的偏移量，而pageX/pageY包括对象滚动而隐藏的偏移量。  
移开屏幕的那个触摸点，只会包含在changedTouches列表中，而不会包含在touches 和targetTouches 列表中， 所以changedTouches在项目当中会比较常用。

需要注意的是：多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart；  
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放  
通过meta元标签来设置。

2.禁止滚动  
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

##### 其实理清了，就很好理解，手机端有touch事件，当touch事件触发后，就会自动产生一个event对象，event对象里有属性列表（数组），且属性列表中都包含关于触摸的相关信息 #####

代码示例如下

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>touch相关属性</title>
    		<style type="text/css">
    			div{ width: 30px;height: 30px;background: red;}
    		</style>
    	</head>
    	<body>
    		<div id="demo">	</div>
    		<script type="text/javascript">
    			var box = document.getElementById('demo');
    			box.addEventListener('touchstart',function(e){ 
    				console.log(e,e.touches,e.targetTouches,e.changedTouches[0].target);
    			})
    		</script>
    	</body>
    </html>

打印出的内容为：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][20190920161431854.PNG]

[Link 1]: https://www.cnblogs.com/cangqinglang/p/8794621.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190920161424354.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190920161427882.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[20190920161431854.PNG]: https://img-blog.csdnimg.cn/20190920161431854.PNG