小程序弹层点击其他位置 隐藏 点击相应位置发生点击事件

上面的选择列表弹出后出现弹框，点击列表的按钮以外区域隐藏弹框遮罩层。

<view bindtap="hideIcon">
<view class="navList {{navList==true?'navListActive':''}}">
    <view class="nav  {{navList==true?'navNew':''}}" hover-stop-propagation="true">
      <view class="navView  {{navList==true?'navViewNew':''}}"
       wx:for="{{nav}}"
       wx:for-item="item" 
       wx:key="{{index}}" 
       wx:for-index="index" 
       data-attr="{{item.attr}}" 
       data-name="{{item.name}}"
       data-id="{{item.placesortid}}"
       catchtap="tabIcon"
       hover-stop-propagation="true"
       >
        <image src="{{item.img}}"></image>
        <view>{{item.name}}</view>
      </view>
    </view>
  </view>
</view>
Page({
	data:{
	},
	onLoad(){
	},
	//点击tab按钮跳转页面
	tabIcon:function(){
		//这里是跳转页面
	},
	//点击其他位置隐藏遮罩层
	hideIcon:function(){
	
	},
})

hideIcon这个事件我是放到了页面中最大的一个父级点。
子级节点的事件用的是catchtap

事件绑定和冒泡
事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

在子节点加上了hover-stop-propagation=‘true’
指定是否阻止本节点的祖先节点出现点击态