移动端touch事件和click事件相互影响

写scalajs，习惯了阻止所有事件的默认行为，在写轮播图的时候，给轮播图的父元素同时加上touch事件和click事件，click事件不会执行

参考贴：移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

移动端上点击屏幕时，会依次触发touchstart,touchmove,touchend,click事件。

正确的触发过程应该是：

touchstart->touchmove->touchend 或者

touchstart->touchend->click

在touchmove中加入如下代码：

var w = x<0?x*-1:x;     //x轴的滑动值
var h = y<0?y*-1:y;     //y轴的滑动值
if(w>h){                //如果是在x轴中滑动
   event.preventDefault();
}

就是在touchmove中判断x轴和y轴的移动值，判断当前是往哪个方向滑动，如果是在x轴上滑动（左右），就调用event.preventDefault()方法，如果是在y轴上滑动（上下）或者未滑动，就不调用event.preventDefault()，这样就不会阻止后续的click事件。

conclude：

1、如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault()方法。

2、在touchstart中如果有event.preventDefault()方法， 将不会触发click事件和a标签方法。在这里可以使用tap代替click，但是a标签的话就不太方便了。

3、如果在touchmove中有event.preventDefault()方法，最好加上方向判断，当然如果你页面内容不需要滚动条就不需要加判断了。