2021-09-10 用css、html、js模拟操作系统3 阻止事件冒泡

用css、html、js模拟操作系统2_更何况不过刚好的博客-优快云博客https://blog.youkuaiyun.com/weixin_53862758/article/details/120150574模拟操作系统1_更何况不过刚好的博客-优快云博客https://blog.youkuaiyun.com/weixin_53862758/article/details/120110125?spm=1001.2014.3001.5501

紧接着上一篇文章往下说，上一篇文章做到下面这样

 但是还是有bug存在，不知道大家有没有发现，点击这个输入框之后，它就一直存在，不管怎么弄，它就是存在，只有重新刷新它才不在了，而我们的操作系统是只要点击旁边，这个界面就会隐藏，更多下面的那个div也是那样的，那解决这个问题其实也是挺简单的一件事情。

不知道大家知不知道js执行机制，就是事件发生之后有一个捕获阶段和冒泡阶段，addEventListen其实还有第三个参数，如果不加，默认是false，就是冒泡阶段，加了true就是捕获阶段，我们程序员一般只关注冒泡阶段，所以第三个参数一般情况下都是不写的。

那么什么是捕获阶段和冒泡阶段呢？

捕获阶段就是事件发生之后，js会逐级往上找，找元素本身，有事件，再去父亲找，最后到document找，找完之后捕获阶段就结束了。

冒泡阶段就是事件发生之后，会先找document，再找父元素，最后找元素本身，因为这个特性，如果父元素或者document有事件和子元素一样，只要点击子元素，父元素或者document身上绑定的事件也会随之发生。

可能有人会说解决上面那个问题只需要document设置点击之后apply的display为none就行，但是因为冒泡事件的存在，只是点击input这个输入框，这个document的事件也会触发，然后还会因为js是下面的会覆盖上面的特性，无论怎么点击这个输入框，这个apply都会一直隐藏。

所以为了解决这个问题就需要阻止事件冒泡，阻止事件冒泡的代码其实很简单。

在addEventListene的第二个参数里面，是一个函数，之前写的代码，这个函数都是没有任何形参传进去，其实它是可以有形参的，我们一般是写e、evt或者event，这个形参不需要我们自己传实参过去，js自己会传。

 e.cancelBubble = true;,阻止事件冒泡，在事件里面加入这一句，点击input本身就不会触发document的点击事件，这样就可以实现点击input出现，点击旁边隐藏了。