jQuery中事件物件e的事件冒泡用法範例介紹_jquery

之前查手冊的時候沒有看到有事件物件這個概念，當時我想實現的是點擊一個文字框出現一個下拉多選框，在文字框失去焦點是觸發blur事件，從而使下拉框隱藏起來。但是當我要選擇多重選擇框是也會使它隱藏，就不能進行選擇了，這讓我很鬱悶。查了一天的資料，終於在脫離了焦點這塊。在網路上發現有一個事件冒泡的東西，發現透過點擊可以實現我的這項功能。

e.stopPropagation()阻止事件冒泡

複製程式碼

複製程式碼

程式碼

冒泡事件測試

我們先看這段代碼： 複製代碼

程式碼如下:

我們會看到這樣的情況：span alert -> td alert -> table alert。這就叫事件冒泡。就是從下到上，從裡到外，事件依序觸發。能依序觸發的條件是擁有相同事件的多個嵌套的標籤，切事件會同時同步發生，會從裡到外實現相同事件的回應。

有的時候我們不希望事件冒泡咋辦？ 複製代碼

代碼如下:

當我給整個document實作click事件是，可以給文字方塊和下拉選框阻止事件冒泡，使得再點擊她們的同時不會使document觸發事件。

如果想獲得事件相關訊息，就要為知識方法加一個e對象，e就是事件對象。

e.preventDefault()阻止事件預設行為。 複製程式碼

程式碼如下:


$("a").click(function (e ) {
alert("預設行為被禁止嘍");
e.preventDefault();
});

測試


return false等效於同時調用e.preventDefault()和e.stopPropagation()

return false除了阻止預設行為之外，還會阻止事件冒泡。如果手上有一份jquery原始碼的話，可查看其中有下列程式碼： 複製程式碼

程式碼如下:


if (ret===false){
　　event.preventDefault();
　　event.stopPropagation();

}