el-dialog、el-drawer里拖拽出总是会自动关闭的问题（上集）
代码：
https://github.com/sunzsh/st-html-demo/blob/master/innerClick.html
效果预览：
这是两年前的一期视频说的呢
就是饿了么UI 2.0里边
如果你在Dialog里边
任何的位置点击鼠标
然后再拖出来
这个Dialog就会自动关闭
包括这个抽屉组件大家看都是一样的
原因其实很简单
就是这个dialog啊或者这个抽屉啊
它默认
开启了 “遮罩层点击关闭” 的功能
比如说你看我点击遮罩层
这个弹窗就自动关闭
所以呢我两年前给的方案也特别粗暴
就是我们直接把这个功能关掉
就close-on-click-modal
关掉之后呢
虽然这个问题解决了
但是有个问题就是我们点击遮罩层
这个弹框关不掉了
所以呢这回我们来分两期视频
把这个问题弄明白
那首先呢
我们这期视频先来确定一件事
就是我们到底是否可以通过
阻止事件冒泡的方式来
解决这个问题
首先呢我们来看这个demo
我这里写了两个嵌套的div
外边灰色的部分
是外层模拟那个遮罩层
里边白色模拟这个Dialog
然后同时呢
他们分别有自己的click事件
大家看：clickInner
然后这里边写了一个阻止事件冒泡
然后 clickoutter
我们来看一下控制台
注意看啊我点里边有clickInner
点外边有clickOutter对吧
这没有问题
然后清空一下
这回呢我按住里边往外拖
然后再松手 大家看
是不是跟刚才的操作是一样的
但是你注意它只触发了click outter
比如说啊
在这种拖拽出来的情况下他压根就没
有触发内部div的click事件
他直接触发外部的click事件
我们再来试一下啊
我们在内部点击然后拖出来松手
大家注意
是不是只有Altar
所以也就压根谈不上去阻止冒泡
来解决这个问题
那怎么来解决呢
我们可以通过一个临时变量
就说我们在outter的click里边
在这里边加一个判断
判断什么呢
比如我们上面有一个变量
处理好了我们就叫
outterMouseDowned
比如说这个变量代表着outer
就是这个这道层被mouse down了
我们才会走下边
否则的话呢就不走
否则
我们叫return
那这个变量怎么来处理呢
我们现在在上面声明一下
默认它是false
然后呢其实很简单
我们在outter这个上面加一个
onMouseDown等于什么呢
就让这个变量等于
我们去找这个event.target.classList
就是这个 event.target 代表着
触发mouseDown的那个元素
它有可能是（outter的）子元素
也有可能是这个outter元素自身
我们现在就要判断
它是不是outter元素自身
所以呢我们可以通过classList.contains
（是不是包含）
outter的这个class
如果包含
那就说明
触发这个mouse down的是他自身
那这个outterMouseDowned就为true
否则的话呢
为false这样的话呢
我们再来试一下
在内部点击，触发inner
外部点击出发outter
注意我在内部点击拖出来松手
大家看没有任何输出其实
它不是没有触发到outter
是因为我们在这个if给它排除掉了
所以这样的话呢就没问题
大家看 outter、inner，拖出来 都可以了
OK有了这个基础的原理做支撑啊
咱们下期视频从头来
全局继承这个Dialog
然后补丁这个bug
最后更新于
这有帮助吗？