Javascript 单击“外部”时如何关闭自定义popover？

我正在开发Cordova应用程序。为此，我将Vue.js和jQuery用于绑定和脚本，并自行开发UI。我可以为大多数用户界面做页面转换和动画，比如单选按钮和复选框等，但我无法开发自定义的弹出窗口。我尝试了以下代码

Vue.directive（'popover'{
绑定：函数（el、绑定、vnode）{
$（el）。单击（函数（）{
var pagel=$（this）.closest（'.ui-page'）；
pagel.find（'.drawer'）.toggleClass（'active'）；
$（el）.最近（'.ui页'）。单击（函数（e）{
//$（'.drawer'，this.removeClass（'active'）；
});
});
}
})
var pageInstace=新的Vue({
el:'弹出页面'，
数据：{
选项：[1,2,3,4,5]
}
})

html，
身体{
位置：相对位置；
宽度：100%；
身高：100%；
}
身体{
字体系列：“开放式SAN”；
字体大小：16px；
保证金：0；
溢出：隐藏；
}
* {
框大小：边框框；
}
*，*：活动，*：悬停，*：聚焦{
大纲：0；
}
钮扣{
填充：0；
}
img{
最大宽度：100%；
}
.ui页面，
.标题，
.滚动内容{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
溢出：隐藏；
}
.ui页面{
身高：100%；
背景色：#fff；
}
.网页内容{
位置：相对位置；
身高：100%；
溢出y：自动；
z指数：1；
}
.标题{
高度：54px；
盒影：0 3px 4px 0 rgba（0,0,0,0.14），0 3px 3px-2px rgba（0,0,0,0.12），0 1px 8px 0 rgba（0,0,0,0.2）；
背景色：#607D8B；
颜色：#fff；
显示器：flex；
对齐项目：居中；
左侧填充：16px；
右边填充：16px；
z指数：1；
}
.滚动内容{
底部：0；
溢出：自动；
}
.scroll-content.has-header{
顶部：54px；
}
.标题按钮{
颜色：#fff；
身高：100%；
}
.标题.标题标题{
边际：0.22px；
字号：18px；
字号：600；
宽度：100%；
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
.标题.按钮{
位置：相对位置；
显示器：flex；
}
.标题.按钮{
填充：4px8px；
}
.标题.按钮按钮：最后一个子项{
填充：4px 0 4px 8px；
}
.btn{
位置：相对位置；
盒影：0 2px 5px 0 rgba（0,0,0,0.26）；
边界：无；
填充：8px 16px；
字体大小：16px；
边界半径：4px；
字体系列：未设置；
溢出：隐藏；
}
.btn清除{
背景色：透明；
边界：无；
}
.项目{
位置：相对位置；
显示器：flex；
溢出：隐藏；
边框底部：1px实心#bdbdbd；
}
.抽屉{
位置：绝对位置；
背景色：#fff；
z指数：4；
顶部：60px；
右：4px；
边界半径：2px；
盒影：0px2px8px2pxrgba（0,0,0,0.4）；
变换：缩放（0,0）；
变换原点：右上角；
过渡：0.3s；
最小宽度：180px；
}
.drawer.active{
变换：比例（1,1）；
}
.抽屉.抽屉内容{
位置：相对位置；
填充：4px0；
}
.抽屉.抽屉内容：在{
内容：''；
位置：绝对位置；
边框：8px实心透明；
边框底色：#fff；
顶部：-14px；
右：22px；
}
.抽屉.物品{
填充：12px 16px；
字体大小：14px；
}
.抽屉.物品：最后一个孩子{
边框底部：无；
}

页面标题
爆米花
{{option}}
一些内容

请试试这个。我添加了jQuery

$('body').click(function(e) {
  if (!$(e.target).closest('.drawer').length){
    $(".drawer").removeClass("active");
  }
});

$（'body'）。单击（函数（e）{
如果（！$（e.target）.最近（'.drawer'）。长度）{
$（“.drawer”）.removeClass（“活动”）；
}
});
Vue.指令（'popover'{
绑定：函数（el、绑定、vnode）{
$（el）。单击（功能（e）{
e、 停止传播（）；
var pagel=$（this）.closest（'.ui-page'）；
pagel.find（'.drawer'）.toggleClass（'active'）；
$（el）.最近（'.ui页'）。单击（函数（e）{
//$（'.drawer'，this.removeClass（'active'）；
});
});
}
})
var pageInstace=新的Vue({
el:'弹出页面'，
数据：{
选项：[1,2,3,4,5]
}
})

html，
身体{
位置：相对位置；
宽度：100%；
身高：100%；
}
身体{
字体系列：“开放式SAN”；
字体大小：16px；
保证金：0；
溢出：隐藏；
}
* {
框大小：边框框；
}
*，*：活动，*：悬停，*：聚焦{
大纲：0；
}
钮扣{
填充：0；
}
img{
最大宽度：100%；
}
.ui页面，
.标题，
.滚动内容{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
溢出：隐藏；
}
.ui页面{
身高：100%；
背景色：#fff；
}
.网页内容{
位置：相对位置；
身高：100%；
溢出y：自动；
z指数：1；
}
.标题{
高度：54px；
盒影：0 3px 4px 0 rgba（0,0,0,0.14），0 3px 3px-2px rgba（0,0,0,0.12），0 1px 8px 0 rgba（0,0,0,0.2）；
背景色：#607D8B；
颜色：#fff；
显示器：flex；
对齐项目：居中；
左侧填充：16px；
右边填充：16px；
z指数：1；
}
.滚动内容{
底部：0；
溢出：自动；
}
.scroll-content.has-header{
顶部：54px；
}
.标题按钮{
颜色：#fff；
身高：100%；
}
.标题.标题标题{
边际：0.22px；
字号：18px；
字号：600；
宽度：100%；
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
.标题.按钮{
位置：相对位置；
显示器：flex；
}
.标题.按钮{
填充：4px8px；
}
.标题.按钮按钮：最后一个子项{
填充：4px 0 4px 8px；
}
.btn{
位置：相对位置；
盒影：0 2px 5px 0 rgba（0,0,0,0.26）；
边界：无；
填充：8px 16px；
字体大小：16px；
边界半径：4px；
字体系列：未设置；