沒有點擊的jQuery觸發點擊事件

嗯，這就是發生了什麼。沒有點擊的jQuery觸發點擊事件

$('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle(); 
$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function(event){ 
    if (event.keyCode === 13) { 
     openDropdown($(this)); 
    } 
}).click(function(){ 
    openDropdown($(this)); 
}); 

function openDropdown (element){ 
    element.parents('.js-custom-dropdown').find('.custom-dropdown-unfolded').toggle(); 
    console.log($(this)) 
}

當我點擊下拉按鈕，openDropdown功能被執行一次，但是當我標籤我的方式按鈕，然後按回車，函數被調用兩次。猜猜這與鏈接有關，但我承認我是新手，並沒有完全理解jQuery設計模式。我可以通過cource在處理程序中調用該函數兩次，這將解決問題，但是..您知道:)

請問您能解釋代碼中出現了什麼問題以及導致此類行爲的原因？

來源

2013-03-27 Anton Matyulkov

是不是因爲你有2個事件監聽器 - 一個用於keydown（當你按下回車鍵時會觸發），另一個用於單擊按鈕時（當我按下回車鍵時，我猜你正在做什麼） – Pete 2013-03-27 09:20:07

這歸結於html 5用戶交互規範。如果你看一下HTML spec for elements with a tabIndex，你會發現他們提到，對於任何帶有製表索引的元素，回車鍵會導致一個單擊事件。

我懷疑是什麼導致了這種行爲。你可以在一個較老的（不兼容html 5的）瀏覽器上測試它是否屬於這種情況。

編輯（根據海報要求）：answer given by @Terry提供了一種方法來解決您遇到的問題。在事件中使用jquery的「preventDefault」將會阻止它在您輸入時被點擊兩次。

來源

2013-03-27 09:23:17 Timbo

謝謝，這似乎是正確的回答。我已經在IE7中測試了該頁面，並且可以使用Enter鍵打開下拉菜單。雖然我沒有接觸到JS控制檯。雖然，請問您能否提出一種方法讓我可以在所有瀏覽器中都能使用它？ – 2013-03-27 09:27:15

我會接受你的答案，因爲它回答了我發佈的問題，但是你能否引用另一個代碼？ – 2013-03-27 09:31:15

您可以使用的keydown觸發的單擊事件：$(this).trigger('click');，並且防止在的keydown的默認操作：

$('.custom-dropdown-btn, .custom-dropdown-btn-unfolded').keydown(function (e) { 
    if (e.keyCode === 13) { 
     $(this).trigger('click'); 
     e.preventDefault(); 
    } 
}).click(function() { 
    openDropdown($(this)); 
});

這裏是證明了概念小提琴：http://jsfiddle.net/yTuR3/

來源

2013-03-27 09:23:40 Terry

e.preventDefault（）就足夠了。感謝您的幫助 – 2013-03-27 09:30:11

沒有點擊的jQuery觸發點擊事件

回答

相關問題