微信小程序：页面穿透和页面之间滚动的解决

主要是分享两个问题：
（1）页面穿透：
这个页面穿透主要指的是页面的点击穿透，比如说A范围包含B范围，A范围点击触发事件a，B事件触发点击触发事件b，结果再点击范围B的时候触发事件b的同时，范围A的事件啊也被触发，然而你并不想这样做，你指向点击B的时候触发事件b，点击范围A除了B的范围触发a，点击一次只触发一个事件。

（2）页面之间的滚动
其实这个也是穿透的一部分，属于关于页面滚动事件的穿透问题。页面上面还有一个页面之间滚动控制（上面那个页面通常是窗口，列表什么的，有时候内容太多会要求能滚动查看所有信息，然而你做的时候回发现很蛋疼，要不都不动，要不底下的一起动。）

想看解决方案直接看第二部分解决，第一部分就是解释一下为什么，怎么样，原理之类的。

一 概念：
页面穿透
理解这个首先你要知道什么事事件？什么事是冒泡？什么是穿透？
官方文档：
事件，冒泡，bind，catch等里面都有…
为了防止微信官方更新文档更改位置，我记录一下这部分对应的位置：“指南”----》“小程序框架”----》“视图层”-----》“事件系统”。这一部分我很喜欢微信对“事件”的表述，第一句就解释的很好。
a 事件是视图层到逻辑层的通讯方式
b 事件可以将用户的行为反馈到逻辑层进行处理
c 事件是可以绑定在组件上，当达到触发事件，就会执行逻辑层的事件处理对应函数
d 事件对象可以携带额外信息 如 id dataset touch等

冒泡
你联想一下冒泡的情况，一个接一个的。其实指的就是子节点和父节点影响，对应的我们可以把事件分为冒泡事件和非冒泡事件。冒泡事件指的是当一个组件被触发，他会像父节点传递。非冒泡就是，事件触发不会像父节点传递。

所谓的触发常见的有：touch，move…

我们设置事件是否冒泡，通过bind或者catch（bind会向上传递，catch不会向上传递）

常见由于冒泡出现的事件有，父节点有一个touch事件触发，子节点也有一个touch触发，绑定的类型都是bind，点击子节点会触发两次touch事件。

二 问题解决
（1）页面穿透
同一个页面，父节点与子节点通过使用子节点用catchXXX来解决，不会影响子节点触发一次触发两个事件

页面与页面之间，指的是我们在页面这个view上一层又弄了一个view 而且是不同层的（z-index了解一下），常见的我们会用到蒙层，触发弹出的窗口等。我们会遇到一个我们弹出蒙层，我们滚动页面底下的view也跟着动。
想让蒙层或者窗口下面的view不滚动（其实蒙层也是一个view，只是设置了不同的z-index而已。）可以再蒙层上的view上添加

catchtouchmove='catchtouchmove'

添加这个就可以捕捉滚动这个操作，然而他啥也没做底下那个页面也没有受到触发。这个catchtouchmove可以随便起名字，至于要不要在JS里面定义呢？这就看你了，我没有定义微信也没有报错，看了别人有定义的，其实啥事也没做顶多打印一下控制台输出一条信息。

（2）上面页面可以滚动，下面的不滚
当初做这个好蛋疼，要不都动，要不一起动，一起动我也忍了，你下面在动上面不动才是最烦的。解决方案就是：两层 + overflow-y: scroll

具体的实现是：你下面把你的弹出窗口弄出来做一个容器，记住如果要要用position：fixed不能用absolute因为相对定位会出现，下面的页面太长，导致你上面那一层页面是一部分很难看。

在上面那一个容器上里面再建一个view，设置CSS属性overflow-y: scroll，这样就可以滚动了

三思考
这个冒泡，我感觉很可能和他机制有问题，类似于一个栈一个一个传递，同一个page的很多同一级的view最后还是放在一个栈里，可能时间触发也类似这样，穿透类似这一个栈我都穿过去了，不传透，就是触发到我这边我就进行处理，不再往下穿透了。我也没办法验证和相关内容解释，以上只是自己瞎猜的。