亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

阻止事件傳播

chanthuang / 2197人閱讀

摘要：和下面的代碼完全等價(jià)阻止默認(rèn)事件阻止傳播但是如果頁(yè)面中有，你在它的父元素任何一層，包括自己，添加了組織默認(rèn)事件那么這個(gè)就沒(méi)辦法被。

上一次學(xué)習(xí)了DOM 的事件，理解了冒泡事件和捕獲事件，觸發(fā)的機(jī)制，今天學(xué)習(xí)一下具體的應(yīng)用場(chǎng)景，或者說(shuō)在哪個(gè)地方容易踩坑。

做一個(gè)小demo，點(diǎn)擊按鈕出現(xiàn)浮層，點(diǎn)擊其它地方關(guān)閉浮層，寫一個(gè)簡(jiǎn)單css




    
    

        浮層

那現(xiàn)在我要點(diǎn)擊頁(yè)面空白地方關(guān)閉呢？該用什么方法，很容易想到監(jiān)聽(tīng)文檔，如下代碼

document.addEventListener("click",function(){
    popover.stely.display = "none";
});

但是實(shí)際上這樣寫了之后，按鈕都失效了，怎么點(diǎn)都沒(méi)有反應(yīng)。這是為什么呢？
理解上一篇講的捕獲和冒泡事件后就很好理解這點(diǎn)了，可以DOM事件之捕獲、冒泡。
我們沒(méi)有指定監(jiān)聽(tīng)是在捕獲還是冒泡階段，瀏覽器默認(rèn)是冒泡階段，當(dāng)我們點(diǎn)擊按鈕時(shí)，捕獲階段沒(méi)有發(fā)生什么時(shí)候，但是冒泡階段就不一樣了，首先button上函數(shù)先觸發(fā)，然后document上函數(shù)也觸發(fā)了，導(dǎo)致準(zhǔn)備出現(xiàn)的浮層又被隱藏了。
那你可能要問(wèn)，button上的事件執(zhí)行了沒(méi)？其實(shí)這兩個(gè)事件都執(zhí)行了，只是時(shí)間太短，瀏覽器默認(rèn)一起執(zhí)行了，可以在里面加一個(gè)debugger，就可以看到了。

clickMe.addEventListener("click",function(){
    popover.style.display = "block";
});

那該怎么解決呢？最簡(jiǎn)單的方法是，除了要執(zhí)行popover.style.display = "block"，還要阻止事件傳播

clickMe.addEventlistener("click",function(){
    popover.style.display = "block";
});

popover.addEventListener("click",function(e){
    e.stopPropagation();
});

這里為什么添加在按鈕的父元素上面呢？如果不添加在父元素上面，點(diǎn)擊浮層的時(shí)候，浮層也會(huì)被關(guān)閉。

如果頁(yè)面上有很多監(jiān)聽(tīng)器的話，這個(gè)方法是比較浪費(fèi)內(nèi)存的，比較省內(nèi)存的方法用JQuery 做

$(clickMe).on("click",function(){
    $(popover).show();
    $(document).one("click",function(){
        $(popover).hide();
    });
});
$(wrapper).on("click",function(e){
    e.stopPropagation();    
})

一開(kāi)始不監(jiān)聽(tīng)，只在popover`show`的時(shí)候監(jiān)聽(tīng)一次，馬上關(guān)掉，這叫做清理戰(zhàn)場(chǎng)。
$(wrapper).on("click",false) 和下面的代碼完全等價(jià)

$(wrapper).on("click",function(e){
    e.preventDefault();     //阻止默認(rèn)事件
    e.stopPropagation();    //阻止傳播
})

但是如果頁(yè)面中有checkbox，你在它的父元素任何一層，包括checkbox自己，添加了組織默認(rèn)事件那么這個(gè)checkbox就沒(méi)辦法被check。

這里有個(gè)問(wèn)題，如果沒(méi)有阻止事件傳播，向下面這樣，會(huì)發(fā)生什么事情呢？

$(clickMe).on("click",function(){
    $(popover).show();
    $(document).one("click",funtion(){
        $(popover).hide();
    });
});

當(dāng)然了，和之前一樣，什么事情也不會(huì)發(fā)生，那當(dāng)我點(diǎn)擊按鈕之后里面都發(fā)生了那些事情呢？
當(dāng)我點(diǎn)擊了按鈕之后，它會(huì)做兩件事情，首先把popover`show出來(lái)，然后把hide函數(shù)添加到document上面，當(dāng)事件傳播到document`，就會(huì)又把它給隱藏了。

可以給它添加一個(gè)setTimeout()函數(shù)來(lái)解決這個(gè)問(wèn)題

$(clickMe).on("click",function(){
    $(popover).show();
    setTimeout(function(){
        $(document).one("click",function(){
            $(popover).hide();
        })
    },0)
});

setTimeout(fn,0)這個(gè)0不是馬上執(zhí)行，而是盡快執(zhí)行，具體是在冒泡結(jié)束在執(zhí)行這里的函數(shù)，也就是說(shuō)，當(dāng)冒泡結(jié)束后，在把監(jiān)聽(tīng)事件添加到document上面，等待用戶下次點(diǎn)擊在執(zhí)行。

用 jQuery 做事件冒泡

總結(jié)：

同時(shí)監(jiān)聽(tīng)button和document，點(diǎn)啥都沒(méi)反應(yīng)，因?yàn)閮蓚€(gè)函數(shù)都執(zhí)行了，用阻止事件傳播解決了，比較浪費(fèi)內(nèi)存

好一定的方法是用jQuery 做，點(diǎn)擊button后在監(jiān)聽(tīng)document，關(guān)閉了就不再監(jiān)聽(tīng)，不阻止事件傳播，點(diǎn)啥也沒(méi)反應(yīng)，兩種解決方法：一種是阻止事件傳播，另一種是添加一個(gè)setTimeout()函數(shù)。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95225.html

相關(guān)文章

  • 瀏覽器事件模型中捕獲階段、目標(biāo)階段、冒泡階段實(shí)例詳解

    摘要：目標(biāo)階段真正點(diǎn)擊的元素的事件發(fā)生了兩次，因?yàn)樵谏厦娴拇a中，既在捕獲階段綁定了事件，又在冒泡階段綁定了事件，所以發(fā)生了兩次。所以很明顯用直接綁定的事件發(fā)生在了冒泡階段。 如果對(duì)事件大概了解，可能知道有事件冒泡這回事，但是冒泡、捕獲、傳播這些機(jī)制可能還沒(méi)有深入的研究實(shí)踐一下，我抽時(shí)間整理了一下相關(guān)的知識(shí)。 本文主要對(duì)事件機(jī)制一些細(xì)節(jié)進(jìn)行討論，過(guò)于基礎(chǔ)的事件綁定知識(shí)方法沒(méi)有介紹。 特別少...

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

  • JS DOM Event

    摘要：事件處理程序事件偵聽(tīng)器的設(shè)定級(jí)級(jí)首先講級(jí)事件處理程序?qū)κ录姆绞奖环Q為事件處理程序或事件偵聽(tīng)器，但這兩者之間是有區(qū)別的。此外，不能對(duì)事件目標(biāo)事件類型執(zhí)行階段都相同的對(duì)象注冊(cè)多個(gè)相同的事件偵聽(tīng)器。 關(guān)于這一篇章有太多對(duì)于我來(lái)說(shuō)雜且亂的知識(shí)點(diǎn)，單單是分別DOM層級(jí)劃分我看過(guò)的文章就有（0,2,3）的，（0,2）的，由于自己知識(shí)掌握還很薄弱所以只能參考別人文章結(jié)合自己理解來(lái)寫，這其中也涉及到...

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

  • Javascript事件流

    摘要：見(jiàn)下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會(huì)接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個(gè)階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流？ 事件流所描述的是從頁(yè)面中接受事件的順序 2.DOM事件流的三個(gè)階...

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

  • Javascript事件流

    摘要：見(jiàn)下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會(huì)接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個(gè)階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流？ 事件流所描述的是從頁(yè)面中接受事件的順序 2.DOM事件流的三個(gè)階...

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

  • Javascript事件流

    摘要：見(jiàn)下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會(huì)接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個(gè)階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流？ 事件流所描述的是從頁(yè)面中接受事件的順序 2.DOM事件流的三個(gè)階...

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

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

0條評(píng)論

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