今天小编跟大家讲解下有关教你应付一个很恶心却常见的需求（点击自身以外的区域关闭自己） ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关教你应付一个很恶心却常见的需求（点击自身以外的区域关闭自己） 的相关资料，希望小伙伴们看了有所帮助。
做前端最难受的就是产品给的需求以及测试给的bug了，看待这个标题是不是有点蒙，这是什么需求，下面来解读下！需求需求：如下图，点击已保存按钮弹出已保存列表，当点击屏幕其他区域要关闭这个下拉框，是不是很简单
加点东西，但是点击这个下拉框内部的区域不能关闭下拉框）（原谅我里面没写东西你就当有东西，给个机会噻！），是不是很常见，是不是很恶心！你们是怎么做的。 之前我见过有人把事件挂在window上，然后把不想要操作dom都挂上class，然后在点击事件里面一一排除括弧笑，或者有人投机取巧在一部分dom上挂了事件，结果又是测试不是每次都能关闭，全看运气！
接天就来说下我的解决办法，因为我是写的react，我就直接上react代码了，逻辑都是一样，无妨！
挂载事件首先在componentDidMount中写下我们函数的触发：
window.addEventListener('click', (event) => { event = event || window.event; this.setState({ savedListShow: false， // 这个是控制列表显隐的状态 })； })事件挂在window上怎么避免点击列表内部的dom不会触发呢，不要说什么阻止冒泡，不好使的，首先我们在事件中输出我们event，看看到底是什么！
元素挂上不想触发的识别class这是我点击列表内部输出的event。
说是路径，其实在深一步输出出来的是js对象，既然是js对象那我们就能拿到对象上的calss属性了，对于我们的判断也就不成问题了。
去代码中到找我们不想要触发的那个（或者是一堆）不想触发的dom的最大父级，
对的我这里是class为SavedList的div，在最前边（记住是最前边）加上一个class_&saveBtn（别人不用的,免得冲突）。
点击事件中加判断排除不想触发的dom在细看下上边我点击输出的event中的path, 每一个元素.后的就是class, 注意横线处的class，这说明我点击的事件源是我不希望触发的区域，然后我们回到最开始componentDidMount中的事件函数。
componentDidMount() { // 点击其他区域关闭已保存条件弹窗 window.addEventListener('click', (event) => { event = event || window.event; let isSaveStructure = event.path.some(item => { 这里使用了startsWith，相对来说比较严谨，这要是为什么强调要在最前边添加的原因了 if (item.className && item.className.startsWith('_&saveBtn')) { return true; } }); if (!isSaveStructure) { this.setState({ savedListShow: false }); } }) }这样依赖我们不想触发的dom以及dom内部的元素，遇到这个点击事件就会呗排除在外了，是不是很省心。
总结添加事件window.addEventListener('click', (event) => {})；在不想触发的dom的最大父级上添加用于区分的class，比如class为SavedList的div以及内部dom不需要触发那就在SavedList上添加需要识别的class， 主要要避免和其他人的冲突，最好是特殊一点；在之前写好的实践中，判断注意path里面的是一个数组，包含的是js对象，抓取返回回来的className是string类型，不是数组，我们判断使用的是startsWith();原文：https://segmentfault.com/a/1190000021020795
来源：爱蒂网
