前言
工作时，很多UI组件库的样式未必是项目需要的，这个时候可能要自己手写一个，例如对话框，但写完之后项目往往有要求，点击空白处关闭对话框，之前我的解决方式都是加上透明的背景，然后点击背景就关闭了对话框，不过这种方式有个缺点，就是如果客户要点击另一个按钮，需要点第一次关闭了对话框，再点一次才能点到，那么体验感就很不好，于是我研究了UI框架里的对话框确实不需要像我那样加个背景层，经过多次试验，总算解决了这个问题，今天有空就分享给大家。
思路
利用mouseup等监听鼠标事件的方法(移动端就换成点击事件)，判断点击的区域是否自己要排除的区域，如果不是，就触发对话框的关闭事件。
// 原生dom的写法 document.documentElement.onmousedown = (e=>{ // 如果会出现多个不同的dialog这里就用循环，现在先默认写死只有一个 let dialog = document.getElementsByClassName("dialog")[0]; if(dialog && !document.getElementsByClassName("dialog")[0].contains(e.target)) document.getElementsByClassName("dialog")[0].style.top = ‘-50%‘; }) // jQuery的写法 $(document).mouseup(e=>{ let dialog = $(‘.dialog‘); if(dialog && !dialog.is(e.target)) dialog.css("top","-50%"); });
完整代码：git@github.com:13632756286/Dialog.git
原文：https://www.cnblogs.com/zxd66666/p/13121436.html