vue中点击一个盒子显示样式，现在要点击盒子之外的空白处，让样式隐藏，应该添加什么事件？

Question

vue中点击一个盒子显示样式，现在要点击盒子之外的空白处，让样式隐藏，应该添加什么事件？

Answer 1

思路：

给文档添加一个点击事件，点击文档的时候，让样式隐藏；

给盒子添加一个点击事件，点击盒子的时候，让样式显示，并且阻止事件的冒泡，这样就不会执行文档的点击事件了。

代码：

document.addEventListener('click', function (e) {

  // 样式隐藏操作

}, false)

// 给盒子元素的@click添加.stop修饰符，也就是@click.stop

Answer 2

获取鼠标点击的位置，判断鼠标点击的位置，是否在盒子的区域内，在盒子区域内，显示样式，不在盒子区域内就隐藏