2013-05-06 61 views
1

我有一個網站,有幾個按鈕,打開不同的jQuery UI對話框。點擊事件在IE中打開錯誤的對話框

其中一個對話框(ID爲filter_story)是一個文本字段,用戶可以在該字段中鍵入稍後用於在輪詢服務器時過濾故事的關鍵字。我設置了文本字段,以便用戶可以輸入多個關鍵字,在輸入每個項目後單擊類別approve_filter_item的按鈕,或者用戶只需單擊每個關鍵字之間的enter按鈕即可。

// button to open the keyword filter list 
$("#filter_stories").click(
    function(){ 
     $("#filter_dialog").dialog("open"); 
    } 
); 

$(".approve_filter_item").click(function(){ 
    [process the just inserted keyword and then put focus back on the textfield] 
}); 

//listen for enter key when user's focus is on entering a new keyword 
$(".new_filter_item").keydown(function (e) { 
    if (e.keyCode == 13) { 
    $($(this).parents("tr")[0]).find(".approve_filter_item").click(); 
    } 
}); 

// button to show the post story dialog form 
$("#post_a_story").click( 
    function(){ 
     $("#new_story_form").dialog("open"); 
    } 
); 

所有版本的Chrome,FF和Safari瀏覽器的所有功能都完全符合預期。但是,我在IE中遇到了一些不良行爲。

假設IE用戶在#filter_stories對話框中輸入關鍵字,然後單擊enter;會發生什麼情況是​​事件偵聽器按預期觸發,但在它執行觸發器的觸發器之後,它還會執行click事件偵聽器。之前,我使用keyup而不是​​,在這種情況下,當用戶單擊enter和我的keyup事件偵聽器根本沒有觸發時,神祕地立即觸發#post_a_story點擊事件。如果我完全刪除了post_a_story事件偵聽器,則會打開另一個對話框。爲什麼enter按鍵會觸發不相關的click事件?

請注意,如果用戶單擊approve_filter_item按鈕而不是單擊enter,則會按照預期處理該關鍵字。

+2

您是否有表單元素上的提交事件的任何偵聽器?也許這就是觸發。按ENTER時是否阻止默認行爲? – bfavaretto 2013-05-06 00:20:07

+0

我沒有dom中的任何聽衆,只有在ie中打開對話框。儘管如此,從我的點擊事件監聽器返回false確實阻止了事件冒泡到ie中一些看不見的監聽器。所以,@ bfavaretto,如果你想提交你的評論作爲答案,我會很樂意接受它。另外,我很想知道其他人是否注意到這種類型的行爲。 – 2013-05-06 23:14:48

回答

0

正如@bfavaretto指出的,.preventDefault()結束了這個奇怪的行爲。我不知道爲什麼它首先發生。