微信浏览器中，使用touchMove等事件时，会同时导致整个页面下拉显示网址问题解决！！

问题描述：

页面需要做一个上拉下拉的滑动效果，所以自己加了一些touchmove，touchstart，touchend等事件来控制。pc下效果都挺不错的，但是到了微信浏览器中，恶心的情况就来了：每次下拉的时候，都会导致微信浏览器整个页面下拉显示网址，同时由于这两个事件冲突导致下滑效果非常差。

问题分析过程：

先来一通疯狂百度再说。

结果查到的东西全是让禁用touchmove事件，还有一些高级点的加了一些判断，比如通过类名或者设置原型链上的某个属性值来判断是否阻止默认事件。

      document.body.addEventListener('touchmove', function (e) {
        e.preventDefault()
      }, { passive: false })

一一尝试之后，发现只要触发了touchmove事件，就一定会出现微信下拉显示网址的问题。
然后心态逐渐爆炸。

下班回去睡一晚上后发现，我给body加了 e.preventDefault()之后，好像有点效果了，虽然我拖动箭头区域依然显示下拉网址，但是我拖动其他固定区域，并不会显示下拉网址了！！

说明 e.preventDefault()是关键。

不过中间又走了一些歪路，比如什么判断事件处于目标阶段再执行，判断元素类名上包含scroll才允许继续执行之类，因为之前一直认为下拉显示网址是因为微信浏览器里冒泡导致的，虽然我早就禁用了冒泡。

然而并没有什么用，依然是只要触发了touchmove就会显示下拉网址。

其实关键还是微信浏览器是如何来执行下拉显示网址这个操作，不是冒泡也不是捕获，而是微信浏览器对touchmove等事件进行了封装！里面肯定有某种机制，直接监听了事件，只要事件的默认事件执行，那么就会同时触发微信浏览器的下拉显示网址效果！！所以禁用冒泡和判断元素，判断类名根本没用！
为了验证这一猜想，输出一下微信浏览器中的事件，

可以看到，事件内容和chrome浏览器中的完全不一样：

问题解决：

因此，只要我禁用默认事件，那么就能中断事件机制的继续传达，避免微信浏览器下拉显示网址！
于是将代码改写一下，先执行自己写的相关js操作，确保自己写的滑动效果ok，然后马上阻住默认事件的传播！！：

打包，测试 ，效果OK ！

—————更新线————————————————————————————————

兼容click事件

but，这样处理之后，点击事件却无法触发了。
研究后发现，touch事件是优先于click事件触发的，也就是说先触发touchstart，touchend，再触发click。
而我前面直接e.prevendDefault()，导致后面的touchend和click事件无法触发。
因此，这里还是通过类名做了一下判断（前面的弯路没有白走）

在touchstart事件和touchend事件中，判断一下类名中是否包含’click’，如果包含，就不阻止默认事件。
而touchmove事件中不要添加，否则又会导致下滑的时候触发了微信下拉网址！
最后测试，效果ok，能够同时存在click事件和滑动事件！