vue：
1.创建一个按钮和容器，按钮控制显示和隐藏，容器存放内容
<div @click.stop="isShow = true">显示</div>
<div v-show="isShow" v-clickoutside="handleClose">
...//代码
</div>
2.编写自定义指令
<script>
const clickoutside = { // 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
// 这里判断点击的元素是否是本身，是本身，则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener('click', documentHandler);
},
update() {},
unbind(el, binding) { // 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
export default {
directives: { clickoutside },
data() {
return {
isShow:false,
}
},
methods:{
handleClose(){
this.isShow = false;
}
}
}
</script>
javascript：
点击按钮，盒子显示，点击页面任何一个地方，盒子隐藏（阻止事件的冒泡，原生js）
<body>
<!-- 点击按钮，盒子显示，点击页面任何一个地方，盒子隐藏 -->
<button>点击</button>
<div class="box">展示的内容</div>
</body>
<style>
.box{
width: 100px;
height: 100px;
background-color: skyblue;
display: none;
}
</style>
<script>
var btn = document.getElementsByTagName('button')[0]
var box = document.getElementsByClassName('box')[0]
// 因为事件有默认冒泡行为，当点击btn的时候，事件会冒泡到document上，
所以只会隐藏，不会显示了 所以要阻止btn的冒泡行为
// 如果要处理浏览器的兼容问题的话，封装一个函数阻止冒泡行为
function stopP(ev){
if(ev.stopPropagation){
ev.stopPropagation() //标准浏览器
}else{
ev.cancelBubble = true //IE8及以下
}
}
btn.onclick=function(ev){
box.style.display = 'block'
var ev = ev||event //事件对象（IE和谷歌：是全局的event对象;火狐：是事件函数的第一个参数）
stopP(ev)
}
document.onclick=function(ev){
box.style.display = 'none'
}
</script>
