事件冒泡 == 得与失

hersion 发布于2019-08-26 11:37 / 1189人阅读

摘要：那么事件冒泡这时候就有用了，所有的点击事件都会传递到根元素，那么我们只需要在根元素加一个点击事情去隐藏它就了。

今天想聊一聊js的事件冒泡！

在项目中遇到了一个很奇怪的问题：
父元素点击时，让它的子元素弹出一个伪造的选择框；
在选择框完成选择后，关闭它；
 
    性别  
    
      男
      
        男
        女
      
   
  （注：着重关注它的层级关系，只是一个简单实现性别切换的功能）

这时候一个诡异的现象发生了：

    无论怎么点击都不会让它实现隐藏，是代码写错了。逻辑没生效？？？
    然而并没有，细细扒一扒，发现在谷歌下那个displace：block；
    没有移除，在消失的那一瞬间，又出现了，时间很短。
    
    突然想起来js中的点击事件是会向上级传递的，（称事件冒泡）
    那让我们再来理一下逻辑：
    父元素点击后，弹起子元素的选择框，在子元素点击后，关闭选择框，
    然后点击事件向上传递，传给父元素，激活父元素的点击事件，完了
    又弹起子元素的选择框。

好了，既然原因已经知晓，那就终止事件冒泡不就得了，网上很多方法：
笔者这里直接在子元素点击事件函数的最后面加一句： return false；

    当然事件冒泡其实也是有一些好处的：
    这个选择框其实还是有一些问题，比如点击其它地方我想让他消失，
    但是我又能预判到用户下一个会点击那个元素呢，人家把你选择框
    激活了，又不一定会选择，又可能会点击其它地方的对吧！所以只
    是选择隐藏，还是有一定问题的。

那么事件冒泡这时候就有用了，所有的点击事件都会传递到根元素，那么
我们只需要在根元素加一个点击事情去隐藏它就ok了。

     $(document).click(function(){
         //隐藏弹出div
     })

云服务器 GPU云服务器冒泡事件事件冒泡事件冒泡机制阻止冒泡事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107257.html

您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

wushuiyong 2019-08-02 16:15 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

amc 2019-08-23 17:14 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：目前预览版现在已经可以在上使用，很快就可以在上使用。版本发布月日，官博发文宣告正式发布。距离年月发布版已有一年多了。官方表示，这是系列的最后一个版本，他们将全力准备。发布时隔一年，如约而至，正式发布第一个版本。showImg(https://user-gold-cdn.xitu.io/2019/4/30/16a6c4a6f112f3d6); 【阿里云 TXD 前端月刊】- 热门前端技术快报，...

fevin 2019-05-23 17:30 评论0 收藏0
您的四月份前端补给包已到，请查收～

摘要：版本发布月日，官博发文宣告正式发布。官方文档提供了如下的示例终端上的输出热门文章我在阿里云做前端抓住我们核心的竞争力，并同时发现业务中的问题，跨端推进解决，这是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 热门前端技术快报，聚焦业界新视界；前端领域急速发展的节奏...

Joonas 2019-08-29 18:45 评论0 收藏0