移动端touchstart,touchend效果实现-点击图片出现阴影，滑动消失

手机端要实现如下效果：

点击图片或长按图片，图片出现阴影效果，且可以跳转到相应的链接，滑动或者松开图片时，此效果都会消失。注意，屏幕可以正常滑动，而且阴影在字之下，图之上。

手机端的这种效果，我们使用touchstart,touchend来实现。

（1）首先要了解需要的事件

touchstart,是手指触摸屏幕是触发的效果，touchend,是手指从屏幕抬起时触发的事件， 而touchmove是这两个事件之间的事件。假设你绑定了这个三个事件。一个滑动动作，会分别触动touchstart,touchend,而这中间会触发很多个touchmove事件。当然，如果一个简单的点击事件，或按抬动作，那么只会触发touchstart,touchend. 

（2）要了解相关的属性

touches跟踪的触摸操作

changeTouches上次触摸后发生了什么改变的 touches的对象（这个概念，是几篇文章中都这样描述的）。其中在touchend事件中，只有changedTouches.

这些对象中，我们这里用到的是关于touch点的触摸坐标，有三种，clientX,pageX,screenX. 我使用的是相对距离，因此具体哪一种应该没有影响。当touchend的点距离touchstart的点距离小于5时（考虑人点击时有点误差移动），阴影会去掉。当大于5时，则认为user希望滑动，所以在touchend时不发生跳转。

（3）实现方法，即touchstart时，阴影，display:block的形式出现；touchend时，取消阴影，判断手滑动的距离，滑动时，则不跳转；否则认为是点击时，才跳转页面。

（4）代码：此代码仅为举例，css样式并未附上。请看.mobile-only-ml下的代码，是针对手机端的。js代码讲述了怎么实现这个效果的。

      <!-- section 5-->
      <div class="sports-favourites-ml clearfix">
        <div class="sports-favourite">
          <div class="effect-block-ml">
            <a class="sport-image" href="https://frontcnpp.cube-net.pub/zh/">
              <img src="https://pixl.decathlon.com.cn/s610902/favourite-570x400.jpg" alt=""/>
            </a>
            <div class="color-block-ml" >
            </div>
            <div class="text-block-up">
              入门运动单品
            </div>
            <div class="button-fade-in">
              <a href="https://frontcnpp.cube-net.pub/zh/">查看全部</a>
            </div>
          </div>
          <div class="mobile-only-ml">
            <a class="sport-image" href="https://frontcnpp.cube-net.pub/zh/">
              <img src="https://pixl.decathlon.com.cn/s610902/favourite-570x400.jpg" alt=""/>
            </a>
            <div class="cover"></div>
            <div class="text-block-mobile">
              入门运动单品
            </div>
          </div>
        </div>
        <div class="sports-favourite">
          <div class="effect-block-ml">
            <a class="sport-image" href="https://frontcnpp.cube-net.pub/zh/">
              <img src="https://pixl.decathlon.com.cn/s610902/favourite-570x400.jpg" alt=""/>
            </a>
            <div class="color-block-ml" >
            </div>
            <div class="text-block-up">
              热门运动套装
            </div>
            <div class="button-fade-in">
              <a href="https://frontcnpp.cube-net.pub/zh/">查看全部</a>
            </div>
          </div>
          <div class="mobile-only-ml">
            <a class="sport-image" href="https://frontcnpp.cube-net.pub/zh/">
              <img src="https://pixl.decathlon.com.cn/s610902/favourite-570x400.jpg" alt=""/>
            </a>
            <div class="cover"></div>
            <div class="text-block-mobile">
              热门运动套装
            </div>
          </div>
        </div>
      </div>

document.querySelector('.sports-favourites-ml').addEventListener('touchstart',function(e){
      startX = e.touches[0].pageX;
      startY= e.touches[0].pageY;
      var img=$(e.target);
      var cover=img.parents('.mobile-only-ml').children('.cover');
      cover.css('display','block');
//      console.log("I am at start", e.touches[0].target);
//      console.log(e.touches[0].pageX, e.touches[0].clientX,e.touches[0].screenX)
    });

    document.querySelector('.sports-favourites-ml').addEventListener('touchmove',function(e){
      endX = e.touches[0].pageX;
      endY= e.touches[0].pageY;
      var img=$(e.target);
      var cover=img.parents('.mobile-only-ml').children('.cover');
      cover.css('display','block');
//      console.log("I am at move", e.touches[0].target);
    });

（5）以下是几篇关于touch的文章

http://blog.csdn.net/lee_magnum/article/details/17753807

http://xiongzaiqiren.lofter.com/post/1b1d40_7cf8aa8#