h5事件监听

问题：点击div(或弹框)外的任何区域div(或弹框)消失

前情提要：

项目是用angular写的移动端页面，测试反馈点击确认按钮每次都要点击2次才生效，体验很不好，需要优化。页面如下图所示：点击金额输入框键盘出现输入金额，键盘是单独封装的组件，点击页面其他地方键盘消失。

定位问题：

当测试跟我说的时候，我第一反应是是不是点击有延迟啊，然后我亲自测了一遍，发现有键盘出现的时候需要点2次，没有键盘出现的时候一次就生效了，然后看了代码发现，按照代码逻辑是这样的没错，因为键盘组件中在键盘外absolute了一层透明div（宽高100%）,然后当键盘展示的时候点击确认按钮其实点击到的是这层隐形div所以第一次点击其实是关闭键盘，需要再点一次按钮确认按钮才能正常生效。所以问题就是：解决这个点击div其他区域隐藏div的事。

解决问题：

解决这个问题还是很简单的，把之前隐形的绝对定位div去掉，重新写一个方法隐藏键盘就好了，首先想到的肯定是在document上绑定addEventListener监听事件，所以就有以下2个问题需要考虑：（1）什么时候去绑定这个监听事件？

（2）需不需要移除监听事件，什么时候去移除这个监听事件？（因为不移除的话，会造成内存泄漏，可能还会造成其他一些bug）

基于以上2个问题，最先想到的是：在进入组件或者页面的时候添加监听事件，在离开组件的时候移除监听事件，但是这样会有问题：进入页面键盘是默认false不展示的，进入页面就绑定监听点击页面隐藏键盘，这样的话键盘怕是永远都展示不出来了。。。。

然后就想到在键盘展示的时候添加监听，隐藏的时候移除监听，就要用到angular的ngOnChanges生命周期钩子（ngOnChanges具体使用方法在最后有展示）：

ngOnChanges (changes: SimpleChanges) {
// 判断变化的属性中是否有变量show(show为true,键盘展示，false键盘隐藏)
    if (changes.show) {
      if (ch