黑马程序员技术交流社区

标题: 移动端click和touch的区别 [打印本页]

---

作者: SHUI    时间: 2017-2-2 18:15
标题: 移动端click和touch的区别

我们很多时候在做移动端的项目的时候，经常会出现一些手指点击的效果，那么其实在移动端我们分为两种事件，一种是单击，一种是触摸，也就是click事件和touch事件，那么对于click大家都太熟悉不过了，pc和移动设备是通用的，但是和touch事件又有一定的区别，touch事件响应速度更快，交互上更加的流畅。

在移动端，用户手指去点击一个元素，会经过这样的一个过程：

•        touchstart --> touchmove --> touchend =====> click
•       也就是说当用户手指按到屏幕出发touchstart之后，会牵扯到一个事件流的概念，点击事件可以分解成多个事件。我们先来认识四种touch事件：
  

•        touchstart                        手指放到屏幕上时触发
•        touchmove                手指在屏幕上滑动式触发
•        touchend                        手指离开屏幕时触发
•        touchcancel                系统取消touch事件的时候触发
  

这里要注意了，每一个touch事件被触发后，会生成一个event对象。

对于手持设备的浏览器来说，touch事件和click事件的触发条件就有明显的区别，我们通过一个很简单的例子，验证一下二者谁先被触发，我们给一个盒子同时绑定touch事件和click事件。

首先，在移动端我们获取元素会使用：

•         document.querySelector();
  

然后，我们实体化一个盒子，分别绑定touch事件和click事件之后变色：

•         <style>
•                   .box{width: 200px;height: 200px;background: green;}
•           </style>
•         <div class="box"></div>
•         <script>
•           var oBox = document.querySelector('.box');
•           oBox.addEventListener('touchend',function(){
•                   oBox.style.backgroundColor = 'yellowgreen';
•           })
•           oBox.addEventListener('click',function(){
•                   oBox.style.backgroundColor = 'skyblue';
•           })
•       </script>
  

然后通过chrome模拟手机模式，发现盒子先变成yellowgreen，最后变成了skyblue。那么问题就来了，能不能只触发touch事件而不去触发click事件，那么这里有一个方法可以阻止事件的默认行为：

•        <script>
•         var oBox = document.querySelector('.box');
•           oBox.addEventListener('touchend',function(){
•                   event.preventDefault();
•                   oBox.style.backgroundColor = 'yellowgreen';
•           })
•           oBox.addEventListener('click',function(){
•                   oBox.style.backgroundColor = 'skyblue';
•           })
•        </script>
  

---

作者: dreamerlala    时间: 2017-2-2 23:21
厉害了～～～～～

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2