MUi DIV侧滑菜单怎么监听遮罩层点击事件

div侧滑里面是使用以下代码显示遮罩蒙版的
<div id="backdrop" class="mui-off-canvas-backdrop"></div>
只需要监听该div的tap事件，即可实现关闭div侧滑菜单并实现自我逻辑。

看下图，有四个格子，每个格子最多只能输入5个文字，如果输入超过5个文字，那么，多余的部分将不会被输入到单元格内，而是自动被删除。这样的效果，只需要设置列和行的属性就可以实现了。方法如下：首先，选中整个表格，然后点击右键，选择菜单中的“表格属性”，这样会d出对话框。在对话框中，切换到“行”选项卡，如下图。上图中，先√选“指定高度”，然后，在行高值是那里，务必要选择“固定值”，如上图。然后，再输入一个行高的数字即可。接着，还需要设置列的宽度。如上图一样，将选项卡切换到“列”，然后勾选“指定高度”，之后，填写一个高度值即可。这样在word表格中输入文字的时候，行高和列宽就不会随着内容的增多而自动改变大小了。

<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">hello</h1></header><div class="mui-content">
<div style="padding:15px;">
<button id='pickDateBtn' type="button" class="mui-btn">选择日期</button>
</div>
<div style="padding:15px;">
<button id='pickTimeBtn' type="button" class="mui-btn">选择时间</button>
</div></div><script type="text/javascript">documentgetElementById("pickDateBtn")addEventListener('tap', function() {
var dDate = new Date();
//设置当前日期（不设置默认当前日期）
dDatesetFullYear(2016, 7, 16);
var minDate = new Date();
//最小时间
minDatesetFullYear(2010, 0, 1);
var maxDate = new Date();
//最大时间
maxDatesetFullYear(2016, 11, 31);
plusnativeUIpickDate(function(e) {
var d = edate;
muitoast('您选择的日期是:' + dgetFullYear() + "-" + (dgetMonth() + 1) + "-" + dgetDate());
}, function(e) {
muitoast("您没有选择日期");
}, {
title: '请选择日期',
date: dDate,
minDate: minDate,
maxDate: maxDate
});
});
documentgetElementById("pickTimeBtn")addEventListener('tap', function() {
var dTime = new Date();
//设置默认时间
dTimesetHours(6, 0);
plusnativeUIpickTime(function(e) {
var d = edate;
muitoast("您选择的时间是：" + dgetHours() + ":" + dgetMinutes());
}, function(e) {
muitoast("您没有选择时间");
}, {
title: "请选择时间",
is24Hour: true,
time: dTime
});
});

---