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

資訊專(zhuān)欄INFORMATION COLUMN

preventDefault, stopPropagation, stopImmediateProp

TesterHome / 3232人閱讀

摘要：同樣是使用上面的示例，但這次我們給添加個(gè)，一個(gè)是被所有共享的，另一個(gè)是獨(dú)有的，假設(shè)這兩個(gè)對(duì)當(dāng)前網(wǎng)站的功能很重要。登場(chǎng)他可以阻止事件冒泡并且阻止相同事件的其他偵聽(tīng)器被調(diào)用。

event事件對(duì)象有三種易混淆的方法，本文講述他們之間的區(qū)別：

Event.preventDefault()

Event.stopPropagation()

Event.stopImmediatePropagation()

綜述

首先，我們看看他們?cè)贛DN上的介紹：

preventDefault: 如果當(dāng)前event.cancelable屬性為true，則取消的當(dāng)前事件的默認(rèn)動(dòng)作，但不阻止當(dāng)前事件的進(jìn)一步傳播

stopPropagation: 阻止當(dāng)前冒泡或捕獲階段的進(jìn)一步傳播

stopImmediatePropagation: 阻止調(diào)用相同事件的其他監(jiān)聽(tīng)器

Event.preventDefault

我們來(lái)看一個(gè)代碼示例，當(dāng)點(diǎn)擊一個(gè)form中的submit按鈕時(shí)會(huì)將form提交處理，此時(shí)如果使用Event.preventDefault，就可以在點(diǎn)擊submit按鈕時(shí)避免表格提交。


    

        
        
    

    

        
        
    

    

        
        
    

    
    

        
    




$("#myForm").on("submit", function(e) {
    e.preventDefault(); // 什么都不會(huì)發(fā)生
});

Event.preventDefault能確保表格不會(huì)被提交，但他不能阻止來(lái)自冒泡階段的submit或點(diǎn)擊事件，其他兩種方法就是解決這個(gè)問(wèn)題的。

Event.stopPropagation

stopPropagation 保證當(dāng)前事件不再進(jìn)一步冒泡，通過(guò)以下代碼示例說(shuō)明：

$(".container").on("click", function(e) {
    console.log("container 被點(diǎn)擊了");
});

$(".element").on("click", function(e) {
    e.preventDefault(); // 此時(shí)鏈接不會(huì)跳轉(zhuǎn)
    console.log("element 被點(diǎn)擊了");
});

此時(shí)點(diǎn)擊鏈接，console會(huì)顯示：

"element 被點(diǎn)擊了"
"container 被點(diǎn)擊了"

這時(shí)如果添加Event.stopPropagation:

$(".container").on("click", function(e) {
    console.log("container 被點(diǎn)擊了");
});

$(".element").on("click", function(e) {
    e.preventDefault(); // 此時(shí)鏈接不會(huì)跳轉(zhuǎn)
    e.stopPropagation(); // 此時(shí)事件冒泡被阻止
    console.log("element 被點(diǎn)擊了");
});

再次點(diǎn)擊鏈接，會(huì)看到：

"element 被點(diǎn)擊了"
Event.stopImmediatePropagation

以上兩種方法已經(jīng)可以解決我們?cè)谑录幚碇?0%的問(wèn)題，接下來(lái)介紹一種無(wú)法解決情形。
同樣是使用上面的示例，但這次我們給添加2個(gè)class，一個(gè)是被所有共享的class: item，另一個(gè)是獨(dú)有的class: element，假設(shè)這兩個(gè)class對(duì)當(dāng)前網(wǎng)站的功能很重要。

我們首先使用之前提到的Event.stopPropagation

$(".element").on("click", function(e) {
    e.preventDefault(); // 此時(shí)鏈接不會(huì)跳轉(zhuǎn)
    e.stopPropagation(); // 此時(shí)事件冒泡被阻止
    console.log("element 被點(diǎn)擊了");
});

$(".item").on("click", function(e) {
    console.log("item 被點(diǎn)擊了");
});

當(dāng)我們點(diǎn)擊時(shí)，將會(huì)顯示：

"item 被點(diǎn)擊了"
"element 被點(diǎn)擊了"

這個(gè)現(xiàn)象會(huì)發(fā)生是因?yàn)閕tem與element在DOM中是被平等對(duì)待的，與之前被點(diǎn)擊然后冒泡到父級(jí)div不同，這次我們點(diǎn)擊同時(shí)觸發(fā)了item與element的事件，此時(shí)使用stopPropagation無(wú)法阻止這種事件。

stopImmediatePropagation登場(chǎng)~
他可以阻止事件冒泡并且阻止相同事件的其他偵聽(tīng)器被調(diào)用。

$(".element").on("click", function(e) {
    e.preventDefault(); // 此時(shí)鏈接不會(huì)跳轉(zhuǎn)
    e.stopImmediatePropagation(); // item的點(diǎn)擊事件將被阻止
    console.log("element 被點(diǎn)擊了");
});

$(".item").on("click", function(e) {
    console.log("item 被點(diǎn)擊了");
});

這里我們要注意的一點(diǎn)是：stopImmediatePropagation的代碼要盡量放到其他同級(jí)競(jìng)爭(zhēng)事件代碼的上面，如上面的例子中，為了使stopImmediatePropagation起作用，我們將element的事件監(jiān)聽(tīng)代碼放到了item之前！

運(yùn)行最后一例中的代碼，將只會(huì)看到：

"element 被點(diǎn)擊了"

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

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

相關(guān)文章

  • preventDefault,stopPropagation,return false三者的區(qū)別

    摘要：與之順序相反的是事件捕獲?？梢岳斫鉃槭堑纳?jí)版，除了阻止冒泡，還能阻止結(jié)束掉當(dāng)前對(duì)象未執(zhí)行的其它綁定事件方法。作者以樂(lè)之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。參考文章之間的區(qū)別 逛帖子的時(shí)候看到道友發(fā)的前端面試題， preventDefault(), stopPropagation(), return false三者的區(qū)別 這三者的使用想必大家并不陌生，但是細(xì)想之下還是有可究之處。 pre...

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

  • 白話解釋 Javascript事件preventDefault,stopPropagation及re

    摘要：如圖使用事件捕獲模式注冊(cè)事件監(jiān)聽(tīng)對(duì)最外層，中間層，最內(nèi)層分別用捕獲模式注冊(cè)事件監(jiān)聽(tīng)，我們上面說(shuō)了，如果使用捕獲模式，那么第三個(gè)參數(shù)應(yīng)該是，否則則是冒泡模式，如果不聲明，默認(rèn)為冒泡模式。 來(lái)源: 個(gè)人博客 想必好多童鞋都有直接復(fù)制粘貼event.preventDefault() 或者event.stopPropagation() 的經(jīng)歷，但是為什么這樣做不甚了解，今天我們的目的就是要徹...

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

  • preventDefault()、stopPropagation()、return false 之間

    摘要：取消默認(rèn)操作，如標(biāo)簽的，時(shí)會(huì)觸發(fā)，有時(shí)需要取消默認(rèn)操作。停止冒泡，的事件流和的事件流類(lèi)似。是頂層元素分發(fā)，底層元素，由頂層往上事件傳遞，叫冒泡。停止冒泡用等同于參考文章之間的區(qū)別 1. preventDefault 取消默認(rèn)操作，如a標(biāo)簽的href，click時(shí)會(huì)觸發(fā)，有時(shí)需要取消默認(rèn)操作。 2. stopPropagation 停止冒泡，dom的事件流和android的事件流類(lèi)似。a...

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

  • JavaScript 設(shè)計(jì)模式讀書(shū)筆記(六)——門(mén)面模式

    摘要：簡(jiǎn)單的門(mén)面模式實(shí)例事件綁定函數(shù)門(mén)面模式的作用是將復(fù)雜的接口進(jìn)行包裝，變成一個(gè)便于使用的接口。還是以事件相關(guān)為例，事件綁定中還有兩個(gè)常用的分別是和。 門(mén)面模式是什么，與其我去用笨拙的語(yǔ)言去解釋?zhuān)蝗缈聪旅孢@張圖，曾經(jīng)在網(wǎng)上很火的一張圖片，說(shuō)的是一位兒子為他的爸媽設(shè)置的電腦桌面。 showImg(http://segmentfault.com/img/bVcgHm); 有了這些起好名字...

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

  • js控制文件拖拽，獲取拖拽內(nèi)容。

    摘要：在用戶拖拽文件到瀏覽器的某個(gè)元素上時(shí)，可以監(jiān)聽(tīng)到與拖拽相關(guān)的事件，并對(duì)拖拽結(jié)果進(jìn)行處理，本文討論下和拖拽文件相關(guān)的一些問(wèn)題，不過(guò)沒(méi)有處理太多關(guān)于兼容性的問(wèn)題。其中，與拖拽文件相關(guān)的事件有文件拖拽進(jìn)文件拖拽在懸浮文件拖拽離開(kāi)文件拖拽放下。 在用戶拖拽文件到瀏覽器的某個(gè)元素上時(shí)，js可以監(jiān)聽(tīng)到與拖拽相關(guān)的事件，并對(duì)拖拽結(jié)果進(jìn)行處理，本文討論下和拖拽文件相關(guān)的一些問(wèn)題，不過(guò)沒(méi)有處理太多關(guān)于兼...

    李世贊 評(píng)論0 收藏0

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

0條評(píng)論

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