jQuery UI單擊事件在按鍵上觸發兩次

Question

的HTML

<button id="clickMe" tabindex=0>Click Me!</button>

JS

$('#clickMe').button();
$('#clickMe').click(function() {
    alert('hey');
});

$(document).keypress(function (e) {
    var key = e.keyCode ? e.keyCode : e.which;
    //detect when the user has hit enter
    if (key == 13) {
        //click the focused element
        $(document.activeElement).click();
    }
});

為什么當您按Tab鍵使按鈕聚焦並輸入按鍵事件時，此警報會觸發兩次，而當您用鼠標單擊該按鈕時，只會觸發一次？

示范

編輯 ： Tab + Enter在IE 10中根本不起作用

Answer 1

因為當焦點位於按鈕上時單擊“ Enter”會本機觸發“ click”事件。 您還會收到一個“按鍵”事件，並從中再次觸發“單擊”事件。

Answer 2

我知道這是一篇老文章，但是當我尋找一個幾乎相同的問題的解決方案時，我發現<button>元素的默認類型是"submit" 。 這意味着，如果在包含此按鈕的<form>中的任意位置按Enter，它將自動提交。

實際上，如果您在這兩個輸入中的任何一個中按Enter鍵，代碼段都會關閉。 如果定義一個函數來單擊Enter鍵事件上的按鈕，除非您在按鈕元素上添加"button" ，否則它將觸發兩次，因為這是通過函數和自動提交觸發的。

TLDR：在您的按鈕元素中添加type="button" 。

 $(document).ready(function(){ $(document).on('click','#submit_type',function(){ console.log($(this).attr('id')) }); $(document).on('click','#button_type',function(){ console.log($(this).attr('id')) }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form1"> <input> <button id ="submit_type">Can enter</button> </form> <form id="form2"> <input> <button type="button" id="button_type">Cannot enter</button> </form> 

Answer 3

我在這里回應Pointy的評論，而不是因為篇幅有限而發表評論。

我可以確認可以在JSbin中看到單擊觸發的事件，但是我不確定如何解決實際應用程序代碼的行為與頁面行為之間的差異。 也許是因為我將“點擊”限制在單獨的一行上而不是將其鏈接起來。

我尚未學習如何使用JSBin，但我鄭重承諾盡快這樣做。 但是，我的信息來自我自己的代碼中的實驗：

$(settings.selectors.patientSearchSubmitButton).click(validatePatientSearch);

其次是

$(settings.selectors.patientSearchSubmitButton).click(alertOnClick);

我還有另一個約束：

        $(settings.selectors.patientSearchParameter).keypress(function (e) {

            if (e.which == 13) {//Enter key pressed
                validatePatientSearch();
            }
        });

PatientSearchParameter是按鈕旁邊的字段。 當我專注於該領域並在chrome，ff，純IE11中單擊“ enter”時，validatePatientSearch函數運行一次，而alertOnClick函數未運行。 當我在IE11兼容模式下對IE8、9、10執行相同的操作時； 該函數運行了兩次，並觸發了alertOnClick。 我不確定如何證明這一點，但這是我的經驗，這是20多次左右的測試嘗試的重復行為。 我正在使用Windows 7 64位。 不知道還有什么可能導致它以這種方式運行，但是我希望它對某人有用。

可能是因為我的點擊綁定到了按鈕而不是字段嗎？