咱们在应用el-dialog和el-drawer时候，当弹框内有表单，用户不小心想复制个内容，拖动光标，最初光标落点在dialog或者drawer的遮罩层，导致弹框敞开，而将用户辛苦填写的内容给革除掉了。这是甲方爸爸忍耐不了的！！！因而就呈现了我这个解决办法！

  1. 在src目录下，（既和main.js）同级创立一个名为fixMouseOutsideAutoClose.js。如下：

    src |- ... |- src |- main.js |- fixMouseOutsideAutoClose.js

  2. 在fixMouseOutsideAutoClose.js文件内写入如下代码：

    import { Dialog, Drawer } from "element-ui";const DialogPatched = {  extends: Dialog,  data() { return {   wrapperMouseDowned: false, };  },  mounted() { this.$el.onmousedown = (e) => {   this.wrapperMouseDowned =     e.target.classList.contains("el-dialog__wrapper"); };  },  methods: { handleWrapperClick() {   if (!this.closeOnClickModal || !this.wrapperMouseDowned) return;   this.handleClose(); },  },};const DrawerPatched = {  extends: Drawer,  data() { return {   wrapperMouseDowned: false, };  },  mounted() { this.$el.onmousedown = (e) => {   this.wrapperMouseDowned = e.target.classList.contains(     "el-drawer__container"   ); };  },  methods: { handleWrapperClick() {   if (this.wrapperClosable && this.wrapperMouseDowned) {     this.closeDrawer();   } },  },};export default {  install(Vue) {     Vue.component(Dialog.name, DialogPatched);     Vue.component(Drawer.name, DrawerPatched);  },};

  3. 在main.js中引入此文件，且必须在element-ui应用之后在应用。如下：

    // main.js内引入fixMouseOutsideAutoClose.jsimport PATCH_fixMouseOutsideAutoClose from "./fixMouseOutsideAutoClose.js";// set ElementUI lang to ENVue.use(ElementUI, { locale });// 笼罩原生ElDialog&ElDrawer，如果是按需引入的须要在按需引入之后再useVue.use(PATCH_ElOverlayAutoClose);

按以上操作即可实现光标拖动到dialog内部不会主动触发敞开事件了。

究其原因不属于事件冒泡。是所有节点再页面上，鼠标抬起时候会触发点击事件。因而须要再原始节点鼠标按下时候给一个状态，如果click事件触发的元素不是按下鼠标的元素则让click事件生效即可。