preventDefault, stopPropagation, stopImmediateProp

TesterHome 發(fā)布于2019-08-22 16:00 / 3236人閱讀

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

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

Event.preventDefault()

Event.stopPropagation()

Event.stopImmediatePropagation()

綜述

首先，我們看看他們在MDN上的介紹：

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

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

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

Event.preventDefault

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

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

Event.preventDefault能確保表格不會被提交，但他不能阻止來自冒泡階段的submit或點擊事件，其他兩種方法就是解決這個問題的。

Event.stopPropagation

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


    點擊我!

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

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

此時點擊鏈接，console會顯示：

"element 被點擊了"
"container 被點擊了"

這時如果添加Event.stopPropagation:

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

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

再次點擊鏈接，會看到：

"element 被點擊了"

Event.stopImmediatePropagation

以上兩種方法已經(jīng)可以解決我們在事件處理中90%的問題，接下來介紹一種無法解決情形。
同樣是使用上面的示例，但這次我們給添加2個class，一個是被所有共享的class: item，另一個是獨有的class: element，假設(shè)這兩個class對當(dāng)前網(wǎng)站的功能很重要。


    Click Me!

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

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

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

當(dāng)我們點擊時，將會顯示：

"item 被點擊了"
"element 被點擊了"

這個現(xiàn)象會發(fā)生是因為item與element在DOM中是被平等對待的，與之前被點擊然后冒泡到父級div不同，這次我們點擊同時觸發(fā)了item與element的事件，此時使用stopPropagation無法阻止這種事件。

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

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

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

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

運行最后一例中的代碼，將只會看到：