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位。 不知道还有什么可能导致它以这种方式运行，但是我希望它对某人有用。

可能是因为我的点击绑定到了按钮而不是字段吗？