国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

事件冒泡 == 得與失

hersion / 1191人閱讀

摘要：那么事件冒泡這時(shí)候就有用了，所有的點(diǎn)擊事件都會(huì)傳遞到根元素，那么我們只需要在根元素加一個(gè)點(diǎn)擊事情去隱藏它就了。

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

在項(xiàng)目中遇到了一個(gè)很奇怪的問題：
父元素點(diǎn)擊時(shí)，讓它的子元素彈出一個(gè)偽造的選擇框；
在選擇框完成選擇后，關(guān)閉它；
 

    
性別
  
    

      
男

      

        
男

        
女

      

  
 
  （注：著重關(guān)注它的層級(jí)關(guān)系，只是一個(gè)簡(jiǎn)單實(shí)現(xiàn)性別切換的功能）

這時(shí)候一個(gè)詭異的現(xiàn)象發(fā)生了：

    無論怎么點(diǎn)擊都不會(huì)讓它實(shí)現(xiàn)隱藏，是代碼寫錯(cuò)了。邏輯沒生效？？？
    然而并沒有，細(xì)細(xì)扒一扒，發(fā)現(xiàn)在谷歌下那個(gè)displace：block；
    沒有移除，在消失的那一瞬間，又出現(xiàn)了，時(shí)間很短。
    
    突然想起來js中的點(diǎn)擊事件是會(huì)向上級(jí)傳遞的，（稱事件冒泡）
    那讓我們?cè)賮砝硪幌逻壿嫞?    父元素點(diǎn)擊后，彈起子元素的選擇框，在子元素點(diǎn)擊后，關(guān)閉選擇框，
    然后點(diǎn)擊事件向上傳遞，傳給父元素，激活父元素的點(diǎn)擊事件，完了
    又彈起子元素的選擇框。

好了，既然原因已經(jīng)知曉，那就終止事件冒泡不就得了，網(wǎng)上很多方法：
筆者這里直接在子元素點(diǎn)擊事件函數(shù)的最后面加一句： return false；

    當(dāng)然事件冒泡其實(shí)也是有一些好處的：
    這個(gè)選擇框其實(shí)還是有一些問題，比如點(diǎn)擊其它地方我想讓他消失，
    但是我又能預(yù)判到用戶下一個(gè)會(huì)點(diǎn)擊那個(gè)元素呢，人家把你選擇框
    激活了，又不一定會(huì)選擇，又可能會(huì)點(diǎn)擊其它地方的對(duì)吧！所以只
    是選擇隱藏，還是有一定問題的。

那么事件冒泡這時(shí)候就有用了，所有的點(diǎn)擊事件都會(huì)傳遞到根元素，那么
我們只需要在根元素加一個(gè)點(diǎn)擊事情去隱藏它就ok了。

     $(document).click(function(){
         //隱藏彈出div
     })

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/107257.html

相關(guān)文章

  • 您的四月份前端補(bǔ)給包已到，請(qǐng)查收～

    摘要：版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問題，跨端推進(jìn)解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，聚焦業(yè)界新視界；前端領(lǐng)域急速發(fā)展的節(jié)奏...

    wushuiyong 評(píng)論0 收藏0

  • 您的四月份前端補(bǔ)給包已到，請(qǐng)查收～

    摘要：版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問題，跨端推進(jìn)解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，聚焦業(yè)界新視界；前端領(lǐng)域急速發(fā)展的節(jié)奏...

    amc 評(píng)論0 收藏0

  • 您的四月份前端補(bǔ)給包已到，請(qǐng)查收～

    摘要：目前預(yù)覽版現(xiàn)在已經(jīng)可以在上使用，很快就可以在上使用。版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。距離年月發(fā)布版已有一年多了。官方表示，這是系列的最后一個(gè)版本，他們將全力準(zhǔn)備。發(fā)布時(shí)隔一年，如約而至，正式發(fā)布第一個(gè)版本。showImg(https://user-gold-cdn.xitu.io/2019/4/30/16a6c4a6f112f3d6); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，...

    fevin 評(píng)論0 收藏0

  • 您的四月份前端補(bǔ)給包已到，請(qǐng)查收～

    摘要：版本發(fā)布月日，官博發(fā)文宣告正式發(fā)布。官方文檔提供了如下的示例終端上的輸出熱門文章我在阿里云做前端抓住我們核心的競(jìng)爭(zhēng)力，并同時(shí)發(fā)現(xiàn)業(yè)務(wù)中的問題，跨端推進(jìn)解決，這是最好的出路。 showImg(https://segmentfault.com/img/remote/1460000019038442); 【阿里云 TXD 前端月刊】- 熱門前端技術(shù)快報(bào)，聚焦業(yè)界新視界；前端領(lǐng)域急速發(fā)展的節(jié)奏...

    Joonas 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<