微信小程序开发踩坑之路--2 事件穿透

很久没更新博客了，最近实在是忙~疲惫的分割线~ (=_=) "

今天要说的是一个小程序踩坑的事 —— 触摸滚动事件的穿透，相信很多用过模态（Modal）弹窗之类的同学都知道，一般会让底部的内容不可操作；而我遇到的问题是底部的内容是可滚动的，而出现的弹窗也是可滚动的，但是，当你在弹窗中滚动到尽头，再次继续滚动，滚动事件就会穿透到 modal 下面的内容，让内容滚动，这种情况下如何解决滚动事件的穿透呢？

接下来上代码，为了保护公司权益，这里使用自己写的一个简单demo，能达到测试目的就好：

  我是内容




  

    
      我是模态
    

  

上图中模态窗口已经滚动到底部，继续滚动时，发生滚动穿透，触发了底下的内容滚动。

如何解决? 这种事件穿透其实就是滚动事件冒泡了，触发了page 的滚动事件，而我们的内容是直接写在 page 内的，这里的 page 是小程序每个页面都会默认存在的最外层标签，就和 H5 中的 html 标签一样，就算不谢html 标签，渲染后，你还是会看到你的内容包含在 html 标签内。 从这可以显而易见的知道，包裹内容部分的容器 page 触发了滚动事件，我们的内容当然也就开始滚动了。

解决翻案很简单，只要我们不让模态窗口的滚动事件触发到底下内容的父容器，同时让内容超出的部分滚动就可以完美解决这个事件穿透的问题。我这里给内容区一个父容器，让父容器布满全屏，超出部分可滚动。这样我们的模态窗口和内容区的父容器是兄弟节点，滚动事件就不会冒泡到内容区的父容器，并触发滚动事件。看下面代码

  
    我是内容
  




  
    
      我是模态
    
  

现在不会触发滚动事件了。